I can’t align a form to the right

Question

 <form class="red">
   <h1></h1>
 </form>

   <div class="map">
     <center>
       <img class= "imgmap" src="https://data.whicdn.com/images/134220427/large.jpg" alt="Forestvile" width="600px" height="500px"/>
     </center>
   </div>

<form class="yellow">
  <h1></h1>
</form>

Style

.yellow{
    align-self: flex-end;
    width: 300px;
    height: 500px;
    margin-top: -500px;
    background: rgba(255, 251, 0, 0.534);
    justify-content: end;
    align-content: flex-end;
    align-items: flex-end;
    align-self: flex-end;
    text-align: end;
    position: relative;
}

Answer 1

School of Life, all right?

You will need to create a DIV to serve grid container with the following CSS statements:

/* Assim declarando, todos os elementos filhos diretos 
daquele container se transformam em grid items.  */
display: grid; 


/* Definindo quantas colunas seu grid ira possuir. */
 grid-template-columns: 1fr 1fr 1fr; 

Follows a very good guide on CSS Grid Layout

Remarks:

Along those lines

 <div class="map">
 <center><img class= "imgmap" src="https://data.whicdn.com/images/134220427/large.jpg" alt="Forestvile" width="600px" height="500px"/></center>
 </div>

The HTML tag <center> This obsolete, define the placement of your elements with css.

Try not to set the image size using width or height on the tag img. The recommendation of w3schools and that attributes are used style to set their size. This prevents other project style sheets from interfering with their size.

form {
  margin: 0 !important;
}

.container-formularios {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 15px;
  justify-items: center;
  align-items: center;
  background-color: rgb(206, 206, 206);
}

.map {
  display: grid;
  justify-items: center;
  align-items: center;
}

.map .imgmap {
  max-width: 100%;
}

.yellow {
  width: 100%;
  height: 150px;
  background: rgba(255, 251, 0, 0.534);
  position: relative;
}

.red {
  width: 100%;
  height:150px;
  background: rgb(233, 111, 80);
  position: relative;
}

<div class="container-formularios">
  <form class="red">
    <h1></h1>
  </form>

  <div class="map">
    <img class="imgmap" src="https://data.whicdn.com/images/134220427/large.jpg" alt="Forestvile" />

  </div>

  <form class="yellow">
    <h1></h1>
  </form>

</div>

Any questions left? I hope I helped, hug.

Answer 2

You are using the text-align wrong. You have to use text-align: right; or else float:right;

Behold Here the documentation of text-align and Here the documentation of float

Answer 3

Hello, @School of Life,

Use the float:right property, and you may also be missing the display so that the element is assigned to the context of the wrap, thus:

.yellow{
  display:inline-block;
  float:right;
}

• This way, you will have the whole block of the form positioned on the right side.
• If what you want is not that, but that the content of the form is aligned to the right, like the label text, the fields and the button, then you can do so:

.Yellow{ display:inline-block; text-align:right; }

.yellow h1,
.yellow label,
.yellow input,
.yellow textarea,
.yellow button{
    display:inline-block;
    float:right;
}