title: 4 side-by-side DIV's not aligning as 3 side-by-side DIV's on smaller screens
body: <p>Alright, I'll try to make this as clear as possible.</p>
  
  <p>I have 4 DIV's next to each other when the page is full-width. Below that there are another 4 DIV's with the same size and everything like this:<br>
  | | | |<br>
  | | | |<br>
  When making the screen smaller, the DIV on the right should go down so there would be 3 DIV's next to each other, and 3 DIV's next to each other below that etc. like this:<br>
  | | | <br>
  | | |<br>
  Now for some reason this won't work properly, the DIV does go down, but stands on the right of the screen like this:<br>
  | | |<br>
  &nbsp; &nbsp;   |<br>
  | | |<br>
  &nbsp; &nbsp;    |<br></p>
  
  <p>Below the code being used:</p>
  
  <pre><code>&lt;div class="cblock highlights i2three-highlights-news" id=""&gt;
  &lt;div class="inner clearfix"&gt;
      &lt;div class="highlight"  id=""&gt;
          &lt;div class="el-inner"&gt;
              &lt;div class="desc-news"&gt;
                  &lt;div class="image-news"&gt;&lt;a href="newsdetail.php"&gt;&lt;img src="images/newsholder.png" alt="" /&gt;&lt;/a&gt;&lt;/div&gt;
                  &lt;div class="title"&gt;Vacature medewerker webshop&lt;/div&gt;
                  &lt;div class="text"&gt;&lt;p&gt; and St. Maarten.&amp;nbsp;&lt;/p&gt;                    &lt;div class="learn-more-news"&gt;LEARN MORE&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="highlight"  id=""&gt;
          &lt;div class="el-inner"&gt;
              &lt;div class="desc-news"&gt;
                  &lt;div class="image-news"&gt;&lt;a href="newsdetail.php"&gt;&lt;img src="images/newsholder.png" alt="" /&gt;&lt;/a&gt;&lt;/div&gt;
                  &lt;div class="title"&gt;Bay West Racingteam in action at the ESSF 2014&lt;/div&gt;
                  &lt;div class="text"&gt;&lt;p&gt; and St. Maarten.&amp;nbsp;&lt;/p&gt;
                  &lt;div class="learn-more-news"&gt;LEARN MORE&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="highlight"  id=""&gt;
          &lt;div class="el-inner"&gt;
              &lt;div class="desc-news"&gt;
                  &lt;div class="image-news"&gt;&lt;a href="newsdetail.php"&gt;&lt;img src="images/newsholder.png" alt="" /&gt;&lt;/a&gt;&lt;/div&gt;
                  &lt;div class="title"&gt;Vacature medewerker debiteurenbeheer&lt;/div&gt;
                  &lt;div class="text"&gt;&lt;p&gt; and St. Maarten.&amp;nbsp;&lt;/p&gt;                    &lt;div class="learn-more-news"&gt;LEARN MORE&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="highlight"  id=""&gt;
          &lt;div class="el-inner"&gt;
              &lt;div class="desc-news"&gt;
                  &lt;div class="image-news"&gt;&lt;a href="newsdetail.php"&gt;&lt;img src="images/newsholder.png" alt="" /&gt;&lt;/a&gt;&lt;/div&gt;
                  &lt;div class="title"&gt;Vacature medewerker webshop&lt;/div&gt;
                  &lt;div class="text"&gt;&lt;p&gt; and St. Maarten.&amp;nbsp;&lt;/p&gt;                    &lt;div class="learn-more-news"&gt;LEARN MORE&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Don't mind the "ID's", they aren't used right now. Below the CSS being used:</p>
  
  <pre><code>.highlights .highlight {
      float: left;
      text-align: center;}
  
  .i2three-highlights-news {margin: auto; width:90%; background-color:white;}
  .i2three-highlights-news .highlight {width: 300px; margin-left: 10px;}
  .i2three-highlights-news .highlight:first-child {margin-left: 0;}
  .i2three-highlights-news .highlight .el-inner {padding: 0 10px 0 0; }
  .i2three-highlights-news .highlight .title, .i2three-highlights-news .highlight .title a {font-family:"Open Sans Light" 'Vollkorn', sans-serif; color: #174f6e; font-size: 24px; line-height: 1; font-weight: bold; height: 63px; margin-bottom: 20px;}
  .i2three-highlights-news .highlight .title:after {width: 20px; height: 1px; display: block; content: "";  position: absolute; bottom: 0; left: 0;}
  .i2three-highlights-news .highlight .text a {font-size: 15px; line-height: 21px; margin: 0 0 20px; color: #3e4856}
  .highlights .highlight .image-news{width:auto; height:auto; margin-left:auto; margin-right:auto; margin-bottom:5%; border:1px solid #d1e6f7}
  .hightlights .hightlight .extra-images-product{width:50px; height:50px; background-color:red;}
  .extra-img{float:left; margin-left:13%;margin-top:5%;margin-bottom:5%;}
  .desc-news {width:300px; height:auto; margin:auto; margin-bottom:10%;}
  .highlights-news{ color: #00376D;display:block; width:100%; margin-bottom:2%;}
  .learn-more-news{text-decoration:underline;}
  </code></pre>
  
  <p>I hope this makes the question clear, any help would be appreciated!</p>