title: Line up nested div tags
body: <p>Please have a look at the image below.  I'm trying to remove the white space in between the images on the left.  Each of the images are in a div tag.  My CSS is located after the image.</p>
  
  <p><img src="https://i.stack.imgur.com/hRN0Q.png" alt="I&#39;m trying to get these div tags to come up next to eachother"></p>
  
  <pre><code>div.Forum {
      border: 2px solid black;
      text-align: center;
      padding: 0 36px;
  }
  
  div.Forum div 
  {
    display: inline;
    float: left;
    clear: none; 
  }
  
  div.ForumChild 
  {
      border: 1px solid black;
      background-color: #F2F2F2;
      width: 228px;
      height:auto;
      padding: 12px 12px 10px 10px;
      margin: auto auto;    
      margin-bottom: 10px;
      margin-right: 20px;
      overflow: hidden;
  }
  
  div.ForumChild img {
      width: 226px;
      height: auto;
      border: 1px solid black;
      float: left;
      border-radius: 2px;
  
  }
  </code></pre>
  
  <p>The Forum class is the parent and the ForumChild class is used for each of the images.  Here is the HTML.  It's created in a Razor View.</p>
  
  <pre><code>&lt;div class="Forum"&gt;
      &lt;p&gt;The Forum&lt;/p&gt;
              @foreach (var item in Model)
              {                                
                      &lt;div class="ForumChild"&gt;                   
                        &lt;img src="@item.Blog.Image.img_path" alt="Not Found" /&gt;
  
                        &lt;br /&gt;
  
                      &lt;/div&gt;
              }
  &lt;/div&gt;
  </code></pre>
  
  <p>Thank you in advance.</p>
  
  <p>I updated my code to the following to resolve my issue. Thanks everyone!</p>
  
  <pre><code>@{
      ViewBag.Title = "Home Page";
      int counter = 0;   
  }
  
  
  &lt;div class="Forum"&gt;
      &lt;p&gt;The Forum&lt;/p&gt;
          @for (int z = 0; z &lt; 3; z++)
          {
              counter = 0;
              &lt;div class="ForumChild"&gt;
                  @foreach (var item in Model)
                  {
                      if (counter % 3 == z)
                      {
                          &lt;img src="@item.Blog.Image.img_path" alt="Not Found" /&gt;
  
                      }
                      counter++;
                  }               
              &lt;/div&gt;
          }
  &lt;/div&gt;
  </code></pre>