Senhores, estou tentando inserir uma grid dentro das minhas Divs, porém a mesma está em conflito com a parte de cima, conforme imagem em anexo, segue um trecho do meu código onde ocorre o problema.
Eu tenho a div row1 que é a parte de cima e a div row2 que é a parte de baixo.
#row1{
height: 160px;
width: 100%;
margin-bottom:200px;
}
#row2{
height: 160px;
width: 100%;
margin-bottom:200px;
}
.container {
width: 500px;
height: 160px;
display: grid;
grid-template-columns: 1fr 1fr;
margin-left:100px;
float:left;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
text-align: center;
}
.container div {
display: flex;
justify-content: center;
align-items: center;
}
.rel, .acu {
grid-column: span 2;
background-color: white;
}
HTML:
<div id="row1">
<c:if test ="${realizadoSG <metaSG}">
<div class="container">
<div class="marca" ><h1>SAMSUNG</h1></div>
<div class="meta">META: <fmt:formatNumber value = "${SG.rows[0].META}" type="currency"/></div>
<div class="rel" style= "background-color: red; color: white;" >REALIZADO: <fmt:formatNumber
value = "${realizadoSG}" type="currency"/></div>
<div class="acu">ACUMULADO: <c:out value="${SG.rows[0].ACUMULADO}"/>%</div>
</div>
<div id="row2">
<c:if test ="${realizadoAS <metaAS}">
<div class="container">
<div class="marca"><h1>ASUS</h1></div>
<div class="meta"><h1>META:<fmt:formatNumber value= "${AS.rows[0].META}" type = "currency"/></h1></div>
<div class="rel" style= "background-color: red; color: white;" >REALIZADO: <h1> <fmt:formatNumber
value= "${realizadoAS}" type = "currency"/></h1></div>
<div class="acu">ACUMULADO:<h1><c:out value="${AS.rows[0].ACUMULADO}"/>%</h1></div>
</div>