title: Why do my CSS modules parents inherit properties of children?
body: <p>I have the following syntax (JSX):</p>
  <pre><code>  &lt;div ref={setNodeRef} style={style} className={`${styles.section} ${className} col-md-12`}&gt;
      &lt;div className={`${styles.green}`}&gt;&lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  <p>And in my <code>file.module.css</code>, the following CSS:</p>
  <pre><code>.section {
    display: flex;
    position: relative;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 12px;
    border: 1px solid red;
  }
  
  .green {
    width: 10px;
    height: 10px;
    border: 1px green solid;
  }
  </code></pre>
  <p>It seems that <code>.section</code> inherits <code>.green</code>'s properties even if the two have nothing to do with each other. How could this be?</p>