Why are my CSS class styles not applying to certain sections in my HTML?

November 10, 2024

I have a html template:

 <body>
    <header>
      <nav>
        <div class="logo">
          <span class="logo-text"
            >LOGO<span class="logo-hard">LOGO</span></span
          >
        </div>
        <ul class="menu">
          <li><a href="#about">about</a></li>
          <li><a href="#team">team</a></li>
          <li><a href="#products">products</a></li>
        </ul>
      </nav>
    </header>

    <section class="hero-section">
      <div class="hero-left">
        <img src="./assets/img/main-picture.png" alt="Hero Image" />
      </div>
      randomowy text
      <div class="hero-right">
        <img src="./assets/img/main-picture.png" alt="Hero Image" />
    </section>
    <section class="what-makes-us-different">What Makes Us Different</section>
    <section class="ingredients">Ingredients</section>
    <section class="dogs-image">Dogs Image</section>
    <section class="products-section">Products Section</section>
  </body>

and a css:

:root {
  --primary-red: #ad4844;
  --primary-grey: #f6f6f6;
}

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

header {
  position: relative;
}

nav {
  background-color: #fff;
  padding: 1em 2em;
  height: 5rem;
  margin-bottom: 5rem;
  position: fixed; /* Przyklejanie nawigacji do góry ekranu */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000; /* Zapewnia, że nawigacja będzie nad innymi elementami */
  display: flex;
  justify-content: space-between; /* Rozdziela logo i menu */
  align-items: center; /* Wyrównuje w pionie */
  border-bottom: 2px solid #ccc; /* Dolny border */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Cień pod dolnym borderem */
}

nav .logo {
  font-size: 1.5em;
  font-weight: bold;
}

nav .logo-text {
  color: #000; /* Czarny kolor dla "Arthro" */
}

nav .logo-hard {
  color: var(--primary-red); /* Czerwony kolor dla części "hard" */
}

/* Menu */
nav .menu {
  display: flex;
  gap: 1.5em;
  margin: 0 auto; /* Wyśrodkowanie menu */
}

nav .menu li {
  display: inline;
}

nav .menu li a {
  color: #000; /* Czarny kolor dla tekstu w menu */
  text-decoration: none;
  font-weight: bold;
}

nav .menu li a:hover {
  color: #555; /* Kolor po najechaniu na link */
}

// products section
.hero-section {
  background-color: black;
}

// 
.what-makes-us-different {
  background-color: pink;
}

/* Ingredients */
.ingredients {
  background-color: pink;
}

/* Dogs Image */
.dogs-image {
  background-color: green;
}

/* Products Section */
.products-section {
  background-color: purple;
}

and the result is:

What Makes Us Different has and hero-section sections have no backgorud colors, but the next sections do have background colors. Why css classess doenst apply to all sections? Why some classes are applied correctly and some are ignored?
I tried using !important, but it didnt help. The style sheet is linked correctly…

heres working example:
https://codepen.io/pjotrusss/pen/xxvmVrY

So for example, why:
What Makes Us Different
text doesnt have yellow background?

>Solution :

The problem here is that "//" is not a valid comment introducer in CSS. Both of the bad sections are preceded by "//" tokens. Replace those with /* comments */ and your code works fine.