Estou estudando css3, estou criando crids dentro de crids e tem alguma coisa errada, minha ul que tem com a classe "side" está ganhando 40px extra, consequentemente o li filho "grid1" está com espaço na esquerda de 40px.
index:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<title>Teste</title>
</head>
<body>
<div class="header">
</div>
<div class="conteiner">
<div class="left">
</div>
<div class="cent">
<div class="cont">
<ul class="side">
<li class="grid1">
</li>
<li class="grid2">
</li>
<li class="grid3">
</li>
</ul>
<ul class="side">
<li class="grid1">
</li>
<li class="grid2">
</li>
<li class="grid3">
</li>
</ul>
</div>
</div>
<div class="righ">
</div>
</div>
</body>
</html>
css:
body{margin:0;}
li{list-style: none;}
.conteiner{display:block;background:#f1f2f3;width:1300px;height:700px;margin:auto;top:0;position:relative;}
.left{float:left;width:200px;height:100%;background:#f9f6f9;}
.cent{float:left;width:900px;height:100%;background:#d0cece;}
.righ{float:left;width:200px;height:100%;background:#f9f6f9;}
.cont{display: flex;width: 100%;height: 100%; background: #ffd805;position: relative;flex-direction: row;justify-content: space-around;}
.side{width: 300px;height: 350px;background: #0096dd;position: relative;}
.grid1{width:300px;height:200px;background:#0A246A;margin:0px;}
li
, certo? Por quê não faz sentido você possuir elementosli
dentro de umadiv
. Aliás, comul
funciona, basta sobrescrever o comportamento padrão dele no CSS. É comum ser utilizado um arquivoreset.css
que faz isso.