I'm making a website and i have been struggling to make two or more `<div>`'s next to each other. 

Here is my code: 

```css
/*---MAKE PAGE---*/

body {
  background: lightblue;
}
.navbar {
  background: lightgreen;
  height: auto;
  width: 1840px;
  float: left;
  margin: 20px;
  padding-left: 10px;
}
.navbar_objects {
  text-decoration: none;
  float: left;
}
.navobj {
  text-decoration: none;
  color: #3399FF;
  float: left;
  margin: 20px;
}
.navobj:hover {
  color: white;
}
#title_of_page {
  color: darkblue;
  margin: 20px;
  padding-left: 880px;
}
.title {
  padding-top: 1px;
  height: 75px;
  width: 1850px;
  background: lightgreen;
  margin: 20px;
}
#title_recent {
  color: darkblue;
  margin: 20px;
  padding-left: 300px;
  padding-bottom: 20px;
}
.main {
  height: 2000px;
  width: 1810px;
  background: lightgreen;
  padding: 20px;
  padding-left: 200px;
  margin: 20px;
}
/*---END---*/

/*----------------START DESCRIPTIONS----------------*/

/*---START FIFA DESCRIPTION---*/

#image_div_recent_fifa16 {
  margin: 0px;
  height: 235px;
  width: 250px;
  float: left;
}
#text_div_recent_fifa16 {
  float: right;
  font-size: 20px;
  width: auto;
  height: auto;
}
/*---END---*/

/*---START NBA CODE---*/

#image_div_recent_nba {
  margin: 0px;
  height: 235px;
  width: 250px;
  float: left;
}
#text_div_recent_nba {
  float: right;
  font-size: 20px;
  width: auto;
  height: auto;
}
/*---END---*/

/*----------------CODE FOR POSTS----------------*/

/*---START FIFA POST CODE---*/

#post_fifa {
  width: 250px;
  height: 450px;
  padding: 20px;
  margin: 10px;
}
#post_fifa:hover {
  border: solid black 1px;
}
/*---END---*/

/*---START NBA POST CODE---*/

#post_nba {
  width: 250px;
  float: up;
  height: 450px;
  margin: 10px;
  padding: 20px;
}
#post_nba:hover {
  border: solid black 1px;
}
```

```html
<html>

<head>

  <title>GameGo - Home</title>
  <link rel="stylesheet" type="text/css" href="stylesheet.css">

</head>

<body>

  <div class="navbar">

    <li class="navbar_objects">
      <a class="navobj" href="index.html">Home</a>
      <a class="navobj" href="games.html">Games</a>
      <a class="navobj" href="reviews.html">Reviews</a>
      <a class="navobj" href="contactus.html">Contact Us</a>
    </li>

  </div>
  <br>
  <br>
  <br>
  <br>
  <br>
  <div class="title">

    <h1 id="title_of_page">Home</h1>

  </div>

  <div class="main">

    <h2 id="title_recent">Recent</h2>

    <br>
    <div class="posts">

      <div id="post_fifa">

        <div class="image_div_recent_fifa16">
          <img src="\\ISB-AD2012\Secondary Students\Grade 9\Paul\ICT\Grade 9\9.3 Web Design\fifa16logo.png" class="img_text_recent">
        </div>

        <div id="text_div_recent_fifa16">
          <p class="class_text_recent">FIFA 16 - Fifa 16 is a football game available on most gaming platforms(Xbox one, PS4, PC, PS3, Xbox 360, Wii U). It is a very good game to play with friends, family or other. You can play 4 player co op on same console.
          </p>
        </div>

      </div>

      <div id="post_nba">

        <div class="image_div_recent_nba">
          <img src="\\ISB-AD2012\Secondary Students\Grade 9\Paul\ICT\Grade 9\9.3 Web Design\fifa16logo.png" class="img_text_recent">
        </div>

        <div id="text_div_recent_nba">
          <p class="class_text_recent">FIFA 16 - Fifa 16 is a football game available on most gaming platforms(Xbox one, PS4, PC, PS3, Xbox 360, Wii U). It is a very good game to play with friends, family or other. You can play 4 player co op on same console.
          </p>
        </div>

      </div>

      <br>
      <br>

    </div>

  </div>

</body>

</html>
```

I would like to put `post_fif`a next to `post_nba`.