title: CSS. Content of a div is outside the div
body: <p>For some reason the content inside my divs are outside them. I have tried <code>overflow:hidden</code> and <code>overflow:auto</code> in the container, such a <code>height:auto</code>, but nothing seems to work.</p>
  
  <p><a href="http://jsfiddle.net/jn4144b9/1/" rel="nofollow">Fiddle here</a></p>
  
  <h2>html</h2>
  
  <pre><code>&lt;div id="portalPage"&gt;
      &lt;div class="containerOfSites"&gt;
          &lt;div class="portalItem col-md-4"&gt;
              &lt;h1&gt;AUTOMOTIVE&lt;/h1&gt;
              &lt;p&gt;web sites for the&lt;span&gt; automotive&lt;/span&gt; market&lt;/p&gt;
              &lt;a href=""&gt;&lt;span class="viewMorePs"&gt;GO&lt;/span&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="portalItem col-md-4"&gt;
              &lt;h1&gt;DESIGN&lt;/h1&gt;
              &lt;p&gt;web sites for the small &amp; large business for&lt;span&gt; all s ectors&lt;/span&gt;&lt;/p&gt;
              &lt;a href=""&gt;&lt;span class="viewMorePs"&gt;GO&lt;/span&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="portalItem col-md-4"&gt;
              &lt;h1&gt;BRANDING&lt;/h1&gt;
              &lt;p&gt;&lt;span&gt;branding&lt;/span&gt; and design&lt;/p&gt;
              &lt;a href=""&gt;&lt;span class="viewMorePs"&gt;GO&lt;/span&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="clearfix"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2>css</h2>
  
  <pre><code>#portalPage{
      background:url('http://i59.tinypic.com/2m780o6.jpg');
      text-align:center;
      padding:30px 50px;
  }
  .containerOfSites{
      display:inline;
      overflow:auto;
      height:auto;
  }
  .portalItem{
      background-color: rgba(255, 255, 255, 0.8);
      border:1px solid blue;
  }
  .portalItem span.viewMorePs{
      margin-bottom:10px;
  }
  .portalItem h1{
      color:#B5D803;
      font-weight:900;
      text-transform: uppercase;  
       font-family: 'Open Sans', sans-serif;
  }
  span.viewMorePs {
      background-color: #B5D803 !important;
      border: 2px solid #FFF !important;
      color: #FFF;
      font-weight: 600;
      font-size:12px;
      padding: 5px 14px;
      border-radius: 5px;
      box-shadow: 3px 3px 3px #383838;
      line-height: 1.4;
  }
  </code></pre>
  
  <p>Does anyone has an idea about what can I do to fix it?</p>
  
  <p>Cheers</p>