Container applies properties preferentially to sections

I have the following code:

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;700;900&display=swap" rel="stylesheet');
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Raleway', sans-serif;
  text-align: center;
}

img {
  max-width: 100%;
  height: auto;
}

.container {
  width: 95%;
  max-width: 70em;
  margin: 0 auto;
}


/* typography
================== */

h1 {
  font-weight: 300;
  font-size: 1.7rem;
  margin-top: 0;
}

p {
  margin-top: 0;
  line-height: 1.5;
}

p:last-of-type {
  margin-bottom: 0;
}

.title {
  font-size: 2.5em;
  margin-top: 1em;
  margin-bottom: 1.5em;
  font-weight: 900;
}

.title span {
  font-weight: 300;
  display: block;
  font-size: .9em;
}

@media(min-width:60rem) {
  p {
    font-size: 1.2rem;
    line-height: 1.6;
  }
  .title {
    font-size: 3.7em;
    margin-bottom: 1em;
    margin-top: 0;
    font-weight: 900;
  }
}


/* buttons */

.button {
  display: inline-block;
  font-size: 1.15em;
  text-decoration: none;
  text-transform: uppercase;
  border-width: 2px;
  border-style: solid;
  padding: .5em 1.75em;
  color: #00ff6c;
  border-color: #00ff6c;
}

@media (min-width: 60rem) {
  .button {
    font-size: 1.5rem;
  }
  .button-small {
    font-size: .7rem;
    font-weight: 700;
  }
  .button-accent {
    color: #00ff6c;
    border-color: #00ff6c;
  }
  .button-accent:hover,
  .button-accent:focus {
    background: #00ff6c;
    color: #232323;
  }
}


/* header
================== */

header {
  position: absolute;
  margin-top: 1em;
  left: 0;
  right: 0;
  margin: 1em;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
  margin: 1em;
}

nav a {
  font-weight: 900;
  text-decoration: none;
  padding: .5em;
  text-transform: uppercase;
  color: #FFF;
  font-size: .8rem;
}

nav a: hover,
nav a: focus {
  color: #DDD;
}

@media(min-width:60rem) {
  .logo {
    float: left;
  }
  nav {
    float: right;
  }
}


/* home-hero
================== */

.home-hero {
  background-image: url(https://i.postimg.cc/XY54RwQY/hero-bg.jpg);
  background-size: cover;
  background-position: center;
  padding: 10em 0;
  color: #FFF;
}

@media (min-width: 60rem) {
  .home-hero {
    height: 100vh;
    padding-top: 35vh;
  }
}


/* hero-home
======================== */

.home-about-textbox {
  background-color: #232323;
  padding: 4em;
  margin: 0 -2.5vw;
  outline: 2px solid #00ff6c;
  outline-offset: -2.5em;
  color: #FFF;
  position: relative;
}

.home-about-textbox h1 {
  color: #00ff6c;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: .75em;
  background: #232323;
  padding: 0 .145em;
  white-space: nowrap;
}

.container {
  width: 95%;
  max-width: 70em;
  margin: 0 auto;
  background-color: mediumvioletred;
  color: magenta;
}

@media (min-width: 25rem) {
  h1 {
    font-size: 2 rem;
  }
  .home-about-textbox h1 {
    top: .6em;
    padding: 0 .325em;
  }
}

@media (min-width: 60rem) {
  h1 {
    font-size: 2.5rem;
  }
  .home-about {
    background-image: url();
    background-repeat: no-repeat;
    padding-bottom: 10em;
  }
  .home-about-textbox {
    width: 50%;
    padding: 7em;
    outline-offset: -3.75em;
    margin-left: -2.5%;
    top: -5em;
    text-align: left;
    box-shadow: 0 0 4em 0 rgba(0, 0, 0, .3);
  }
  .home-about-textbox h1 {
    top: .75em;
    left: 6rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: .75em;
    background: #232323;
    padding: 0 .145em;
  }
}

.container {
  width: 95%;
  max-width: 70em;
  margin: 0 auto;
  background-color: coral;  
font-weight: 100;
color: blue;
}
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Creative Inc.</title>
  <link rel="stylesheet" href="styles.css" type="text/css">
</head>


<body>

  <header>
    <img src="https://i.postimg.cc/NFtwcdYg/logo.png" alt="Creative inc. logo" class="logo">
    <nav>
      <ul>
        <li><a href="">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Contact</a></li>
      </ul>
    </nav>
  </header>

  <section class="home-hero">
    <div class="container">
      <h1 class="title">Making things looks great
        <span>for companies who make great stuff</span>
      </h1>
      <a href="" class="button button-accent">See Our Work</a>
    </div>
  </section>


  <div class="container">
    <section class="home-about">

      <div class="home-about-textbox">
        <h1>Who we are</h1>
        <p>Sit by the fire drink water out of the faucet hide head under banket so no one can see cat is love, cat is life.Knock dish off table eating always hungry so favor packaging over toy.</p>
        <p>
          <srong>Rub face on owner.</srong>Peer out window, chatter at birds, lure then to mouth. Chase ball of string eat a plant, kill a hand, i am the best have secret plans.
        </p>
      </div>
    </section>
  </div>
</body>

</html>

There is a code snippet: https://codepen.io/danamaria5/pen/gOPZRPa .

Here the “container” class selector in css should select both sections “home-hero” & “home-about-textbox”. As you can see in the code snippet, the colors apply just to the home-hero although the background of the home-about-textbox becomes coral in the pc media query. I can’t figure out why is still black in the mobile format.

And the font-weight is applied just to the home-about-textbox. In home-hero, font weight property should be applied just to the bolder top part of the title as the lower one is selected with the .title span which is more specific than the .container. However, this is not the case because the “Making things looks great” text is still bold instead of font-weight: 100; from the container which is selected at the end of the style sheet so nothing else overrides it. Could someone, please explain?

Hi! I figured out that .home-about-textbox overrides .container and I don’t know why. When I delete the color from .home-about-textbox the section becomes coral as the .home-hero.

I tried to keep the black color in the .home-about-textbox and override it with coral within .container div but what happens is that home-about-textbox becomes coral and the home-hero it’s not coral anymore even though the class is also selected with <div class="container"> in html.

I don’t understand why the code is not working as it should be.

Hi,

I outlined the html classes you’re talking about. Remember that the innermost elements always take precedence when you’re defining them in CSS. Anything you assign to home-about-textbox will take precedence over container.

<section class="home-hero">
</section>

<div class="container">
         <div class="home-about-textbox"> </div>  
</div>

Additionally, note that you’ve referred to the .container class three times in the CSS (it’s not within in the scope of media queries the way you have it layed out). For one, consider making it just one declaration (under the DRY principle, don’t repeat yourself). It’s not necessary, but makes for easier control for yourself and others.

Regardless, when the situation is like this, the interpreter I think takes the last instance of a declaration and gives precedence to that one. So you’re bottom-most .container in the CSS file has the most power.

// first time
.container {
  width: 95%;
  max-width: 70em;
  margin: 0 auto;
}
// 2nd time

.container {
  width: 95%;
  max-width: 70em;
  margin: 0 auto;
  background-color: mediumvioletred;
  color: magenta;
}
//3rd time

.container {
  width: 95%;
  max-width: 70em;
  margin: 0 auto;
  background-color: coral;  
font-weight: 100;
color: blue;
}