title: Which Divs should be nested and which shouldn't?
body: <p>I've been playing around with some HTML/CSS lately and I've noticed I'm very sloppy with my divs, and I would like my code to be a lot more clean and reusable. So I'm starting off a new project, and I've already come across one of my biggest issues, here is what my code looks like: </p>
  
  <pre><code>  &lt;div class="container"&gt;
      &lt;div class="jumbotron"&gt;
        &lt;div class="jumbotron-header"&gt;
          &lt;h1&gt;Header name&lt;/h1&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  .jumbotron {
    width: 350px;
    height: 80vh;
    position: relative;
    background-color: #5a5955;
    opacity: .3;
    margin-left: auto;
    margin-right: auto;
    top: 20px;
    border-radius: 10px;
  }
  
  .jumbotron-header {
    color: white;
  }
  </code></pre>
  
  <p>So, it's only logical to think the jumbotrons header should be within the jumbotrons div tag, right? That way it is nested right inside of the jumbotron. Except now all of the text inside of the header is effected by the opacity of the jumbotron, so to "fix" this I would then move the header tag outside of the jumbotron tag, like this: </p>
  
  <pre><code>  &lt;div class="container"&gt;
      &lt;div class="jumbotron"&gt;&lt;/div&gt;
      &lt;div class="jumbotron-header"&gt;
        &lt;h1&gt;Header name&lt;/h1&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>This is what makes my code so sloppy, it's like walking on a mine-field, once I get deep into a project I'm afraid to even touch the HTML. So I'm just wondering what is proper and what I should be doing?</p>