I am studying css3, I am creating crids inside crids and there is something wrong, my ul that has with the "side" class is gaining extra 40px, consequently the child li "grid1" has space left in 40px. / p>
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;}