title: Full width to the ion cards under the ion-content
body: <p>I need to give a full width to the ion card. This works:</p>
  
  <pre><code>ion-card{
          display: flex;
          flex-direction: column;
          width: 100% !important;
          margin: 0 !important;
        }
  </code></pre>
  
  <p>But I need to restrict it only to the children of <code>ion-content</code>. So tried this. But it is not working. i.e. It removes the full width of the cards. Any clue?</p>
  
  <pre><code> ion-content&gt;ion-card{
          display: flex;
          flex-direction: column;
          width: 100% !important;
          margin: 0 !important;
        }
  </code></pre>
  
  <p><em>html</em></p>
  
  <pre><code>&lt;ion-header&gt;
   &lt;ion-card&gt;
        &lt;h2&gt;Notifications Area1&lt;/h2&gt;
    &lt;/ion-card&gt;
  &lt;/ion-header&gt;
  
      &lt;ion-content&gt;
        &lt;ion-card&gt;
          &lt;h2&gt;Notifications Area2&lt;/h2&gt;
        &lt;/ion-card&gt;
      &lt;/ion-content&gt;
  </code></pre>
  
  <p><strong>Note:</strong> I don't need to apply full width to the <code>ion-header</code> card.</p>