Html – Navbar not filling the entire width of the screen on mobile devices

I am working on making my travel-journal site responsive for mobile devices. However, I am facing an issue where the navbar stops at a certain point and doesn’t fill the entire width of the screen on mobile devices.

I have tried setting the width of the .navbar-container to 100% and 100vw, but it doesn’t seem to make a difference. The navbar is still not expanding to fill the entire width.

Here is the relevant code for the navbar:

import earth from '../assets/earth-europe-solid.svg';

export default function Navbar() {
  return (
    <div className="navbar-container">
      <img className="logo" src={earth} alt="Earth logo" />
      <h2 className="first-h2">my travel journal.</h2>
    </div>
  );
}

And here is the corresponding CSS:

.navbar-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 10vh;
  width: 100vw;
  gap: 6px;
  background-color: #F55A5A;
}

.logo {
  width: 30px;
  height: 30px;
  fill: white;
}

.first-h2 {
  color: white;
  font-weight: 500;
}`


I have also tried adding a media query specifically targeting mobile devices, but that hasn't resolved the issue:

`@media (max-width: 500px) {
  .navbar-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 10vh;
    flex-wrap: wrap;
    width: 100%;
  }
}