Why is my div getting an extra 40px?

Asked

Viewed 44 times

0

I am studying css3, I am creating crids within crids and there is something wrong, my ul that has with the class "side" is earning 40px extra, consequently the li son "grid1" is with space on the left of 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;}
html css css3

  • Nothing has changed here! http://prntscr.com/fticpu

  • I already found the error, the problem is the ul that is giving spacing, I traded ul for div is worked.

  • It also changed the elements li, right? Why doesn’t it make sense that you have elements li within a div. Incidentally, with ul works, just overwrite its default behavior in CSS. It is common to use a file reset.css that does this.

1 answer

1


The tags <ol> and <ul>, by default, have 40px of padding-left.

You just need to add padding: 0; inside the selector .side{}.

Browser other questions tagged html css css3

You are not signed in. Login or sign up in order to post.