conflicting width CSS - html

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.