side nav overflow problem

import React from "react";
import NavbarCss from "./css/Navbar.module.css";


export default function Navbar() {
  return (
      <div className={NavbarCss.navbar}>
        <div className={NavbarCss.lowerNavbar}>
          <div className={NavbarCss.upperNavbar}>
            <div className={NavbarCss.leftUpperNav}>
              <div className="flex center">
                <span class="material-symbols-outlined">mail</span>
                <p>[email protected]</p>
              </div>
              <div className="flex center">
                <span class="material-symbols-outlined">call</span>
                <p>0316 5546622</p>
              </div>
            </div>
            <div className={NavbarCss.rightUpperNav}>
              <img className={NavbarCss.facebook} src="facebook.webp" />
              <img className={NavbarCss.google} src="google.webp" />
              <img className={NavbarCss.twitter} src="twitter.webp" />
            </div>
          </div>
          <div className={NavbarCss.navigation}>
            <div className={NavbarCss.navImg}>
              <img className={NavbarCss.logo} src="logo.webp" />
              <p>PRIVATE EYE BOUNCERS</p>
            </div>
            <div className={NavbarCss.navText}>
              <ul>
                <li>HOME</li>
                <li>SERVICES</li>
                <li>ABOUT US</li>
                <li>CONTACT</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
  );
}