Width and margin doesn't add up

Question

So the problem is that pictures doesn't fit in certain width, although they should.I have gallery page with 12 photos and 4 photos in a row. Pictures are 200x200px and space between them should be 60px. Main Div is 980px wide. The simple calculation would be that: 200px + 60px(space) + 200px + 60px + 200px + 60px + 200px = 980px. But it still pushes 4th picture into new row.

HTML:

         <ul>
            <li>
                <a href="photos/01.jpg">
                <img src="photos/thumbnails/01.jpg" alt="First">
                <p></p>
                </a>
            </li>
            <li>
                <a href="photos/02.jpg">
                <img src="photos/thumbnails/02.jpg" alt="First">
                <p></p>
                </a>
            </li>
            <li>
                <a href="photos/03.jpg">
                <img src="photos/thumbnails/03.jpg" alt="First">
                <p></p>
                </a>
            </li>
            <li>
                <a href="photos/04.jpg">
                <img src="photos/thumbnails/04.jpg" alt="First">
                <p></p>
                </a>
            </li>
       .....

       </ul>

CSS:

 .container {
     width: 980px;
     margin: 0 auto;
  }

 li {
    display: inline-block;
    margin-right: 60px;
    margin-bottom: 60px;
  }

 ul li:nth-child(4) {
    margin-right: 0px;
  }

 li:nth-child(8) {
    margin-right: 0px;
  }

 li:nth-child(12) {
    margin-right: 0px;
  }

So I changed 4th, 8th and 12th picture margin-right to 0 so they can fit into container width, but it wont help. First width, when there are 4 pictures in row is 992px but I really can't go over 980px.

Anyone have idea what causes that situation?

I have reseted CSS in start of the project, so there should be no browser malfunctions.

Answer 1

the problem is the padding in the ul, and you need add float:left in the all lis and as—the correct padding for the lis is 45px:

200+45+200+45+200+45+200+45 = 980

CSS:

.container {
    width: 980px;
    margin: 0 auto;
}

a {
    float: left;
}

ul {
    padding: 0;
}

ul li {
    display: inline-block;
    float: left;
    margin-right: 45px;
    margin-bottom: 60px;
}

ul li img {
    width: 200px;
    height: 200px;
}

HTML:

<div class="container">
  <ul>
    <li>
      <a href="photos/01.jpg">
        <img src="https://scontent-iad3-1.xx.fbcdn.net/v/t1.0-9/14054970_1773776819545245_8215005088305267148_n.jpg?oh=6261c87f20d1439b16ab7a0b945a3822&oe=5884A1D0" alt="First">
        <p></p>
      </a>
    </li>
    <li>
      <a href="photos/02.jpg">
        <img src="https://scontent-iad3-1.xx.fbcdn.net/v/t1.0-9/14054970_1773776819545245_8215005088305267148_n.jpg?oh=6261c87f20d1439b16ab7a0b945a3822&oe=5884A1D0" alt="First">
        <p></p>
      </a>
    </li>
    <li>
      <a href="photos/03.jpg">
        <img src="https://scontent-iad3-1.xx.fbcdn.net/v/t1.0-9/14054970_1773776819545245_8215005088305267148_n.jpg?oh=6261c87f20d1439b16ab7a0b945a3822&oe=5884A1D0" alt="First">
        <p></p>
      </a>
    </li>
    <li>
      <a href="photos/04.jpg">
        <img src="https://scontent-iad3-1.xx.fbcdn.net/v/t1.0-9/14054970_1773776819545245_8215005088305267148_n.jpg?oh=6261c87f20d1439b16ab7a0b945a3822&oe=5884A1D0" alt="First">
        <p></p>
      </a>
    </li>
  </ul>
</div>