title: How to align DIVs in a row
body: <p>Referring the following HTML, there are four DIV containers each containing an image, heading-element, paragraph-element, and a link. When the page opens on a full sized computer display, I want the three divs to align side by side across the screen.</p>
  
  <p>So far they are just stacking vertically down the screen.</p>
  
  <pre><code>&lt;div class="threeSpread"&gt;
      &lt;div class="outer"&gt;
      &lt;img src="imagesForNew/new1.jpg"&gt;
      &lt;h2&gt;CHININESE INVESTORS COME TO DETROIT&lt;/h2&gt;
      &lt;p&gt;"the Shanghai-based developer Dongdu International (DDI) made its first move. In an online auction, it snapped up three iconic downtown properties, all built during the citys early 20th-century"&lt;/p&gt;
       &lt;a href="http://www.theguardian.com/cities/2014/jul/22/does-multimillion-dollar-chinese-investment-signal-detroits-rebirth"&gt;theguardian.com&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div class="inner"&gt;
      &lt;img src="imagesForNew/new1.jpg"&gt;
      &lt;h2&gt;CHININESE INVESTORS COME TO DETROIT&lt;/h2&gt;
      &lt;p&gt;"the Shanghai-based developer Dongdu International (DDI) made its first move. In an online auction, it snapped up three iconic downtown properties, all built during the citys early 20th-century"&lt;/p&gt;
       &lt;a href="http://www.theguardian.com/cities/2014/jul/22/does-multimillion-dollar-chinese-investment-signal-detroits-rebirth"&gt;theguardian.com&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div class="outer"&gt;
      &lt;img src="imagesForNew/new1.jpg"&gt;
      &lt;h2&gt;CHININESE INVESTORS COME TO DETROIT&lt;/h2&gt;
      &lt;p&gt;"the Shanghai-based developer Dongdu International (DDI) made its first move. In an online auction, it snapped up three iconic downtown properties, all built during the citys early 20th-century"&lt;/p&gt;
       &lt;a href="http://www.theguardian.com/cities/2014/jul/22/does-multimillion-dollar-chinese-investment-signal-detroits-rebirth"&gt;theguardian.com&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>div {
      display: block;
  }
  
  .threeSpread {
      margin: 0 40px 40px 40px;
  }
  
  div.inner, div.outer {
      max-width: 30%;
  }
  
  @media (max-width: 568px) {
       .outer img {
            float: left;
            margin-right: 5px;
       }
  
       .inner img {
            float: right;
            margin-right: 5px;
       }
  
       h2 { 
           margin-top: 50px
       }
  }
  </code></pre>