How to align DIVs in a row

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.

So far they are just stacking vertically down the screen.

<div class="threeSpread">
    <div class="outer">
    <img src="imagesForNew/new1.jpg">
    <h2>CHININESE INVESTORS COME TO DETROIT</h2>
    <p>"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"</p>
     <a href="http://www.theguardian.com/cities/2014/jul/22/does-multimillion-dollar-chinese-investment-signal-detroits-rebirth">theguardian.com</a>
    </div>

    <div class="inner">
    <img src="imagesForNew/new1.jpg">
    <h2>CHININESE INVESTORS COME TO DETROIT</h2>
    <p>"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"</p>
     <a href="http://www.theguardian.com/cities/2014/jul/22/does-multimillion-dollar-chinese-investment-signal-detroits-rebirth">theguardian.com</a>
    </div>

    <div class="outer">
    <img src="imagesForNew/new1.jpg">
    <h2>CHININESE INVESTORS COME TO DETROIT</h2>
    <p>"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"</p>
     <a href="http://www.theguardian.com/cities/2014/jul/22/does-multimillion-dollar-chinese-investment-signal-detroits-rebirth">theguardian.com</a>
    </div>
</div>

CSS

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
     }
}