title: I'm not sure how this CSS Class code works
body: <p>I'm new to Web Development, and I have made a good progress so far.
  I've encountered this in a recent CSS tutorial while building my Portfolio:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    .container {
      width: var(--container-width-lg);
      margin: 0 auto;
      }
  
      .container.contact__container {
      width: 50%;
      display: grid;
      grid-template-columns: 50% 50%;
      gap: 12rem;
      }</code></pre>
  </div>
  </div>
  </p>
  <p>I have the <strong>.container</strong> Class in the main index.css file, which has width and margin as properties that's it. But in my Contact component, in contact.jsx I have one div element with the classes <strong>contact__container</strong> and <strong>container</strong>, and it's ONLY div that has the contact__container! :</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div className="container contact__container"&gt;
          &lt;div className="contact__options"&gt;
            
            &lt;article className='contact__option'&gt;
              {stuff here}
            &lt;/article&gt;
  
          &lt;/div&gt;
   &lt;div/&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>My question is why we need to be specific and write both the container class and the contact__container class ? In the video he said he needs to be specific to be able to change the width, and yes when he adds the .container class it changes the width of elements. But what does that mean please? why I can't just do:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.contact__container {
  width: 50%;
  display: grid;
  grid-template-columns: 50% 50%;
  gap: 12rem;
  }</code></pre>
  </div>
  </div>
  </p>
  <p>Thanks a bunch.</p>