conflicting width CSS

Question

I have written a simple piece of code that creates a bottom navigation bar for a responsive version of a website am working on. The problem am facing I guess is the width of the bar conflicting on my home page but when I navigate to other pages the width of the navigation bar is okay.

below is my code:

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

.mobile-nav {
  display: none;
  width: 100%;
  height: 25%;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 0;
  border-top: 1px solid rgb(230, 230, 230);
  z-index: 99;
  background: fixed;
  background-color: aliceblue;
}

.mobile-nav-header {
  width: 25%;
  height: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex-wrap: wrap;
}

.menu__text {
  color: black;
  border: none;
  text-decoration: none;
}

.nav-text {
  list-style-type: none;
}

.nav__label {
  font-weight: 500;
}

@media only screen and (max-width: 768px) {
  .mobile-nav {
    display: flex !important;
    height: 9% !important;
    width: 100% !important;
    left: 0;
    right: 0;
    z-index: 10;
  }
}

<div className="mobile-nav">
  <div className="mobile-nav-header">
    <ul className="nav-text">
      <li>
        <IoHomeSharp size={25} className="mobile-nav-header-icon" />
      </li>
      <li>
        <span className="nav_label">Home</span>
      </li>
    </ul>
  </div>
  <div className="mobile-nav-header">
    <ul className="nav-text">
      <li>
        <IoChatbubblesSharp size={25} className="mobile-nav-header-icon" />
      </li>
      <li>
        <span className="nav__label">Option B</span>
      </li>
    </ul>
  </div>
  <div className="mobile-nav-header">
    <ul className="nav-text">
      <li>
        <RiMotorbikeFill className="mobile-nav-header-icon" size={25} />
      </li>
      <li>
        <span className="nav__label">Option C</span>
      </li>
    </ul>
  </div>
  <div className="mobile-nav-header">
    <ul className="nav-text">
      <li>
        <GrRestaurant className="mobile-nav-header-icon" size={25} fill="#0000FF" />
      </li>
      <li>
        <span className="nav__label">Option D</span>
      </li>
    </ul>
  </div>
</div>

My problem is when at the first page the navigation bar stretches past the width I gave it but when I move to another page it takes up the width I gave it. Someone, please help me out on this.

Answer 1

The reason this is happening is because the content of your homepage is exceeding the usual width , this has happened before to me with images that got outside my containers .

Inspect your page with devtools (if you are using chrome) and point your cursor as right as you can to find the element that exceeds your container.