Why does HTML unordered list won't nest and stay the same spot as the main bullet-CodePudding

HTML nested list won't work for me, below is the screenshot of the result but it's aligned to the main bullet. I've seen the tutorials and just did what they did but still the result on my code is not the same as seen on the screenshot. I'm wondering if any of you have encountered this problem. Hoping for some answers. Thank you!

Below is my HTML and CSS code:

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

body {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  color: rgb(48, 48, 48);
  line-height: 1.9;
  background-color: #f3f3f3;
}

.logo {
  color: black;
  text-transform: uppercase;
  letter-spacing: 10px;
  padding-right: 150px;
  padding-top: 12px;
}

.logo img {
  width: 170px;
  height: 75px;
  padding-top: 8px;
  /* padding-right: ; */
  /* border: 2px solid black; */
}

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 8vh;
  font-family: 'Poppins', sans-serif;
  background-color: #f3f3f3;
  width: 100%;
  z-index: 100;
  height: 80px;
  /* position: relative; */
  /* border-bottom: 1px solid black; */
  /* padding: 0 5rem; */
}

.nav-links {
  display: flex;
  /* justify-content: space-around; */
  width: 30%;
}

.nav-links li {
  list-style: none;
  padding: 26px 40px;
}

.nav-links a {
  color: black;
  text-decoration: none;
  letter-spacing: 2px;
  font-size: 15px;
}

nav li:hover {
  background-color: rgb(6, 168, 106);
}

nav li:hover a {
  color: white;
}


/* Section */

.section {
  padding: 5rem 25rem;
  border-bottom: 1px solid rgb(187, 185, 185);
  /* display: flex; */
}

.section-header {
  display: flex;
}

.section1img {
  width: 300px;
  height: 400px;
  /* margin: 60px 150px; */
}

.section1Desc {
  padding: 20px 20px;
  margin-left: 50px;
  text-align: justify;
}

.btnLearnMore {
  background-color: rgb(12, 201, 160);
  border: none;
  border-radius: 5px;
  padding: 10px;
  margin-top: 30px;
  font-size: 20px;
  color: white;
}

.bamboo-section {
  display: flex;
}

.imgBamboo {
  width: 300px;
  height: 400px;
}

.bamboo-description {
  /* margin-left: 125px; */
  margin-top: 50px;
}

.bamboo-description h3 {
  color: rgb(16, 143, 16);
}

.btnKalma {
  border: none;
  border-radius: 5px;
  background-color: rgb(25, 179, 145);
  color: white;
  padding: 5px;
  font-size: 17px;
  margin-top: 25px;
}

.btnKalma:hover {
  background-color: rgb(3, 143, 112);
}

.bamboo-description p {
  margin-top: 25px;
  text-align: justify;
  margin-right: 100px;
}

.lavender-section {
  display: flex;
  margin-top: 75px;
}

.lavender-description {
  margin-left: 100px;
  margin-top: 50px;
}

.lavender-description h3 {
  color: rgb(202, 0, 158);
}

.lavender-description p {
  text-align: justify;
  margin-top: 25px;
}

.imgLavender {
  width: 300px;
  height: 400px;
}

.btnHimbing {
  text-decoration: none;
  border: none;
  border-radius: 5px;
  background-color: rgb(165, 50, 180);
  color: white;
  padding: 5px;
  font-size: 17px;
  margin-top: 25px;
}

.btnHimbing:hover {
  background-color: rgb(122, 4, 138);
}

.benefits-header {
  text-align: center;
}

.benefits-body {
  display: flex;
  justify-content: space-around;
}

.benefits-body div {
  /* border: 1px solid black; */
  /* height: 60px;
  width: 550px; */
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="./src/fontawesome/css/all.min.css" />

  <link rel="stylesheet" href="./css/style.css" />
  <title>Deux Citronella Trading</title>

  <script defer src="./js/script.js"></script>
</head>

<body>
  <header>
    <nav>
      <div class="logo">
        <img src="./rsc/logo2.png" alt="" />
        <!-- <img src="./rsc/DeuxLogo.png" alt="Deux Logo" class="imgLogo" /> -->
      </div>
      <ul class="nav-links">
        <li class="nav-link"><a href="#">Home</a></li>
        <li class="nav-link"><a href="#">About</a></li>
        <li class="nav-link"><a href="#">Contact</a></li>
        <li class="nav-link"><a href="#">Products</a></li>
      </ul>
    </nav>
  </header>

  <section class="section" id="section-1">
    <div class="section-header">
      <img src="./rsc/room&linen.jpg" alt="" class="section1img" />
      <div class="section1Desc">
        <h3>ROOM & LINEN SPRAY</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent laoreet ipsum lorem, quis vulputate nunc venenatis vitae. Donec rhoncus elit at auctor pellentesque. Suspendisse luctus egestas vestibulum. Suspendisse finibus turpis eget orci fringilla,
          in pretium mauris facilisis. Fusce efficitur quam non odio tristique porta. Phasellus bibendum nibh egestas mi bibendum commodo. Donec lobortis ullamcorper eros quis vehicula. Pellentesque et neque a velit bibendum volutpat.
        </p>
        <button class="btnLearnMore">Learn More</button>
      </div>
    </div>
  </section>
  <section class="section" id="section-2">
    <div class="bamboo-section">
      <div class="bamboo-description">
        <h3>Room & Linen Spray: KALMA</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent laoreet ipsum lorem, quis vulputate nunc venenatis vitae. Donec rhoncus elit at auctor pellentesque. Suspendisse luctus egestas vestibulum. Suspendisse finibus turpis eget orci fringilla,
          in pretium mauris facilisis. Fusce efficitur quam non odio tristique porta. Phasellus bibendum nibh egestas mi bibendum commodo. Donec lobortis ullamcorper eros quis vehicula. Pellentesque et neque a velit bibendum volutpat.
        </p>
        <button class="btnKalma">About Kalma &DownArrow;</button>
      </div>
      <img src="./rsc/bamboo.jpg" alt="Bamboo Spray" class="imgBamboo" />
    </div>

    <div class="lavender-section">
      <img src="./rsc/lavender.jpg" alt="" class="imgLavender" />
      <div class="lavender-description">
        <h3>Room & Linen Spray: HIMBING</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent laoreet ipsum lorem, quis vulputate nunc venenatis vitae. Donec rhoncus elit at auctor pellentesque. Suspendisse luctus egestas vestibulum. Suspendisse finibus turpis eget orci fringilla,
          in pretium mauris facilisis. Fusce efficitur quam non odio tristique porta. Phasellus bibendum nibh egestas mi bibendum commodo. Donec lobortis ullamcorper eros quis vehicula. Pellentesque et neque a velit bibendum volutpat.
        </p>
        <button class="btnHimbing">About Himbing &DownArrow;</button>
      </div>
    </div>
  </section>
  <section class="section" id="section-3">
    <div class="benefits-header">
      <h2>Benefits</h2>
    </div>

    <div class="benefits-body">
      <div class="first-box">
        <ul>
          <li>Room freshener</li>
          <ul>
            <li>Leaving your rooms smelling fresh and relaxing</li>
          </ul>
          <li>Insect Repellant</li>
          <li>Toilet Deodorizer</li>
          <li>Sanitizer</li>
        </ul>
      </div>
      <div class="second-box">
        <ul>
          <li>Car Humidifier</li>
          <li>Air Purifier</li>
          <li>Disinfectant Spray</li>
          <li>Workspace Cleaner</li>
        </ul>
      </div>
    </div>
  </section>
</body>

</html>

CodePudding user response：

It's because you do a 'reset' of the margin and padding of all elements with * (universal selector, matches all types) and its declarations.

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

If you remove that, it's showing as you want it to be. Read more about * at MDN. You can also make only adjustments to ul's margin and padding as you wish.

body {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  color: rgb(48, 48, 48);
  line-height: 1.9;
  background-color: #f3f3f3;
}

.benefits-body {
  display: flex;
  justify-content: space-around;
}

<div class="benefits-body">
  <div class="first-box">
    <ul>
      <li>Room freshener</li>
      <ul>
        <li>Leaving your rooms smelling fresh and relaxing</li>
      </ul>
      <li>Insect Repellant</li>
      <li>Toilet Deodorizer</li>
      <li>Sanitizer</li>
    </ul>
  </div>
  <div class="second-box">
    <ul>
      <li>Car Humidifier</li>
      <li>Air Purifier</li>
      <li>Disinfectant Spray</li>
      <li>Workspace Cleaner</li>
    </ul>
  </div>
</div>