我在 React 上更改浏览器窗口大小时无法使徽标与导航栏成比例

Question

如何调整导航栏上的徽标，使其在更改浏览器窗口大小时仍与导航栏上的所有其他元素成比例？我尝试在我的 css 上使用媒体查询，以便它适应较小的屏幕尺寸，但它似乎仍然不起作用，并且还在 css 上将所有内容从 px 更改为 % ...

这是我的页面通常的样子：

页面

这是我缩小浏览器窗口尺寸后的页面（看起来不成比例）：

浏览器窗口最小化

这是我的 navbar.js 文件代码：

import { Link } from "react-router-dom";

import navbarcss from "./Navbar.module.css";
import logo from "../../images/logo.jpg";
import login from "../../images/login.jpg";

function Navbar() {
  return (
    <header className={navbarcss.header}>
      <Link to="/home">
        <img className={navbarcss.logovillanueva} src={logo} alt="Logo" />
      </Link>
      <nav>
        <ul>
          <li>
            <Link to="/home">HOME</Link>
          </li>

          <li>
            <Link to="/about-us">ABOUT US</Link>
          </li>

          <li>
            <Link to="/firm">FIRM</Link>
          </li>

          <li>
            <Link to="/publications">PUBLICATIONS</Link>
          </li>

          <li>
            <Link to="/book-online">BOOK ONLINE</Link>
          </li>

          <li>
            <Link to="/login" style={{ display: "flex", alignItems: "center" }}>
              <img className={navbarcss.loginimg} src={login} alt="Login" />
              <span className={navbarcss.login}>Log In</span>
            </Link>
          </li>
        </ul>
      </nav>
    </header>
  );
}

export default Navbar;

这是我在 navbar.module.css 中的 css 代码：

.header {
  width: 100%;
  height: 6.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #554a58;
  padding: 0 5%;
}

.logovillanueva {
  width: 70%;
  height: auto;
  margin-left: 20%;
  display: flex;
}

.header ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  margin-right: 20rem;
  margin-left: 0;
  white-space: nowrap;
}

.header li {
  margin-left: 2rem;
}

.header a {
  text-decoration: none;
  font-size: 14.5px;
  color: white;
}

.header a:hover,
.header a:active,
.header a:active {
  color: #aa9fad;
}

.badge {
  background-color: #cc2062;
  color: white;
  border-radius: 12px;
  padding: 0 1rem;
  margin-left: 0.5rem;
}

.loginimg {
  width: 130%;
}

.login {
  color: #41bbbc;
}

.login:hover {
  color: #48999e;
}