title: Simple css override
body: <p>I have the following css:</p>
  
  <pre><code>.wrapper {
      display: inline-block;
      margin-top: 60px;
      padding: 15px;
      width: 100%;
  }
  </code></pre>
  
  <p>I want to create another class which <strong>inherit all</strong> <code>wrapper</code> <strong>properties</strong> and overrides the <code>width</code> property:</p>
  
  <pre><code>.wrapper .extended {
      width: 150% !important;
  }
  </code></pre>
  
  <p>And tried to use that in my HTML like:</p>
  
  <pre><code>&lt;section class="wrapper extended"&gt;  
  </code></pre>
  
  <p>But unfortunately that doesn't work.</p>
  
  <p>How can I correct my code ?</p>