School of Life, alright?
You will have to create a DIV to serve as a grid container with the following CSS declarations:
/* 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;
Here's a really good guide to CSS Grid Layout
Comments:
On this line
<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 size of the images using width
or height
in the img
tag.
The recommendation of w3schools and to use the style
attributes to set their size. This prevents other project stylesheets 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>
Has there been any question? I hope I have helped, hug.