CSS Cascading Issue

Question

I'm working on a project and my CSS doesn't seem to be cascading correctly.

I have set some styles (mainly the color property) at the HTML tag level. However it is not cascading to the rest of my elements, specifically the .logo class, but also some other classes. Can anyone help me understand why this is happening?

Here is my code:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: Helvetica, Arial, sans-serif;
  color: seashell;
  background-color: black;
  text-align: center;
  font-size: 22px;
  opacity: 0.9;
}


/* Header and Nav Bar */

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 69px;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid seashell;
}

.logo {
  margin-left: 10px;
  max-height: 50px;
}

.navigation {
  display: flex;
  list-style: none;
}

.navigation a {
  padding: 15px;
}

.navigation a:hover {
  text-decoration: none;
}


/******* Hero *******/

#hero {
  background-image: url(/Images/img-mission-background.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  top: 70px;
  height: 700px;
  width: 1200px;
  margin: auto;
  opacity: 0.8;
}

#hero h2,
h4 {
  padding: 12px;
}


/***** Content ******/

.content {
  position: relative;
  top: 100px;
}

<!--******* Header ******* -->
<header class="header">
  <img src="/Images/img-tea-cozy-logo.webp" alt="Tea Cozy Logo" class="logo" />
  <ul class="navigation">
    <li><a href="#">Mission</a></li>
    <li><a href="#">Featured Tea</a></li>
    <li><a href="#">Locations</a></li>
  </ul>
</header>
<section id="hero">
  <h2>Our Mission</h2>
  <h4>
    Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea
  </h4>
</section>
<section class="content">
  <h1>Tea of the Month</h1>
</section>