0

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;}
3
  • Aqui não mudou nada! prntscr.com/fticpu
    – Caymmi
    Commented 9/07/2017 às 15:22
  • Já achei o erro, o problema é o ul que está dando espaçamento, troquei o ul por div é funcionou.
    – Caymmi
    Commented 9/07/2017 às 15:41
  • Trocou também os elementos li, certo? Por quê não faz sentido você possuir elementos li dentro de uma div. Aliás, com ul funciona, basta sobrescrever o comportamento padrão dele no CSS. É comum ser utilizado um arquivo reset.css que faz isso.
    – Woss
    Commented 9/07/2017 às 15:59

1 Resposta 1

1

As tags <ol> e <ul>, por padrão, possuem 40px de padding-left.

Você só precisa adicionar padding: 0; dentro do seletor .side{}.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .