我正在努力使我的旅行日志网站响应移动的设备。然而，我面临的问题是导航条停止在某个点，并没有填满移动的设备屏幕的整个宽度。
我试过将.navbar-container的宽度设置为100%和100 vw，但似乎没有什么区别。导航栏仍然没有扩展到整个宽度。
下面是导航栏的相关代码：

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>
  );
}

下面是相应的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%;
  }
}