I am having trouble with the layout of my HTML & CSS site.

There are meant to be 4 boxes under the top image, At the moment there are only 3. I would like them to be spread out evenly across the page. The one that isn't visible is history of gaming, I believe that for some reason it is underneath the image...

here is the code:

```css
.jumbotron h1 {
  color: #ffffff;
  font-size: 150px;
  font-family: Sans-serif;
  font-weight: bold;
  text-align: center;
  margin-top: 0px;
}
.jumbotron {
  background-image: url('http://i118.photobucket.com/albums/o117/Shawnthebro/bandicam2014-03-2311-20-03-210_zpse7f7712f.jpg');
  position: absolute;
  left: 0px;
  top: 100px;
  height: 350px;
  display: block;
}
.nav li {
  display: inline;
  text-align: center;
  color: #ff0000;
  font-size: 50px;
  bottom: 350px;
  padding-left: 35px;
  font-family: Sans-serif;
}
.page ul {
  color: #000000;
  font-size: 20px;
  font-family: Calibri;
  padding-left: 75px;
  .page ul li {
    display: inline;
  }
  .page a {
    color: #000000;
    font-size: 15px;
    font-family: Calibri;
    padding-left: 70px;
    div.img {
      margin: 5px;
      border: 1px solid #ccc;
      float: left;
      width: 275px;
    }
    div.img:hover {
      border: 1px solid #777;
    }
    div.img img {
      width: 100%;
      height: auto;
    }
    div.desc {
      padding: 15px;
      text-align: center;
    }
```

```html
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="home.css">
  <title>Gaming T,N & B</title>
  <style>
    div.img {
      margin: 5px;
      border: 1px solid #ccc;
      float: left;
      width: 275px;
    }
    div.img:hover {
      border: 1px solid #777;
    }
    div.img img {
      width: 100%;
      height: auto;
    }
    div.desc {
      padding: 15px;
      text-align: center;
    }
  </style>
</head>

<body>
  <div class="jumbotron">
    <div class="container">
      <h1>Gaming: Then, Now & Beyond</h1>
    </div>
  </div>
  <div class="nav">
    <div class="container">
      <ul>
        <li><a href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/hog.html">History of Gaming</a>
        </li>
        <li><a href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/atari.html">Atari</a>
        </li>
        <li><a href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/othergames.html">Other Games</a>
        </li>
        <li><a href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/future.html">Future</a>
        </li>
      </ul>
    </div>
  </div>
  <div class="img">
    <a target="_blank" href="history.png">
      <img src="history.png" alt="The History of Gaming" width="300" height="200">
    </a>
  </div>
  <div class="desc">
    <div class="page">
      <div class="container">
        <h3>History of Gaming</h3>
        <ul>
          <li>What is gaming?</li>
          <li>Pong</li>
          <li>Technology Boom</li>
        </ul>
        <p><a href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/hog.html">Learn more about the history of gaming</a>
        </p>
      </div>
    </div>
  </div>
  <div class="img">
    <a target="_blank" href="atari.jpg">
      <img src="atari.jpg" alt="Atari" width="600" height="400">
    </a>
    <div class="desc">
      <div>
        <h3>Atari</h3>
        <ul>
          <li>40 years of fun</li>
          <li>Who is Nolan Bushnell</li>
          <li>Bought & Sold</li>
        </ul>
        <p><a href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/atari.html">Learn more about Atari</a>
        </p>
      </div>
    </div>
  </div>
  <div class="img">
    <a target="_blank" href="xbox_ps1.jpg">
      <img src="xbox_ps1.jpg" alt="Other Games" width="600" height="400">
    </a>
    <div class="desc">
      <div>
        <h3>Other Games</h3>
        <ul>
          <li>PC</li>
          <li>Xbox</li>
          <li>PlayStation</li>
        </ul>
        <p><a href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/othergames.html">Learn more about other games</a>
        </p>
      </div>
    </div>
  </div>
  <div class="img">
    <a target="_blank" href="future_ocu.jpg">
      <img src="future_ocu.jpg" alt="Future Gaming" width="600" height="400">
    </a>
    <div class="desc">
      <div>
        <h3>Future</h3>
        <ul>
          <li>Gaming in society</li>
          <li>Who is driving who?</li>
          <li>CrowdFunding</li>
        </ul>
        <p><a href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/future.html">Learn about future gaming</a>
        </p>
      </div>
    </div>
  </div>
  </div>
  </div>
  </div>
  <iframe width="1150" height="315" src="http://www.youtube.com/embed/X1tBEKFYKJg?autoplay=1" style="border:5px dotted red">
  </iframe>
</body>

</html>
```

Many Thanks

Adam