How to align DIVs in a row
<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>