title: CSS div block is inheriting his parent's attributes
body: <p>I have an HTML <code>div</code> inside another <code>div</code>:</p>
  
  <pre><code>&lt;div class="content"&gt;
       &lt;div class="block"&gt;
       blabla
       &lt;/div&gt;
       &lt;br/&gt;
       &lt;div class="block"&gt;
       blabla
       &lt;/div&gt;
       &lt;br/&gt;
       &lt;div class="block"&gt;
       blabla
       &lt;/div&gt;
       &lt;br/&gt;
       &lt;div class="block"&gt;
       blabla
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm expecting to see 4 small blocks containing 'blabla' but instead those blocks are taking the whole area (same width as "content")</p>
  
  <p><img src="https://i.stack.imgur.com/vdX3x.png" alt="expectation versus reality"></p>
  
  <p>How can I disable parent to child inheritance?</p>
  
  <p>CSS:</p>
  
  <pre><code>.block {
    border-radius: 4px;
    border: 1px solid;
    background-color: #d9edf7;
    border-color: #bce8f1;
    color: #3a87ad;
  }
  
  .content {
      margin: 0 auto;
      text-align: left;
      width: 940px;
      background-color: White;
      padding: 20px;
      font-size: 12px;
      border-radius: 7px 7px 7px 7px;
      min-height: 180px;
      height: 80%;
  }
  </code></pre>
  
  <p>thanks</p>