I am trying to create a glassmorphic style header. On big screen it works without any issue, but on mobile screen it shows a darken area at start of div.

One thing that I noticed is that after a certain width it starts to appear. Like below 420px.

This is the picture on Desktop

This is the picture on Mobile]

This is the React code. And below are the styles.

import React from "react";
import * as styles from "./Header.module.css";
import { Link as GatsbyLink } from "gatsby";

enum Routes {
  HOME_PAGE = '/',
  WORK = 'work',
  ABOUT = 'about'
}

const Header = () => {

  return (
    <header >
      <div>
        <nav className={styles.glassMorphism}>
          <ul>
            <li className={window.location.pathname === Routes.HOME_PAGE ? styles.active : ''}>
              <GatsbyLink to={Routes.HOME_PAGE}>Home</GatsbyLink>
            </li>
            <li>
              <GatsbyLink to={Routes.WORK}>Work</GatsbyLink>
            </li>
            <li>
              <GatsbyLink to={Routes.ABOUT}>About</GatsbyLink>
            </li>
          </ul>
        </nav>
      </div>
    </header>
  );
};

export default Header;

Using the following styles

.glassMorphism {
  background-color: rgb(17 25 40 / 31%);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(16px) saturate(50%);
  /* -webkit-backdrop-filter: blur( 20px ); */
  border: 1px solid rgba(255, 255, 255, 0.125);
  border-radius: 10px;
}

header {
  width: 98vw;
  /* padding-left: 10px; */
}

header>div {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

}

nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

nav a {
  color: aliceblue;
  text-decoration: none;
  padding: 8px 0px;
}

ul {
  border-radius: 24px;
  border: 1px solid rgb(91 91 91 / 13%);
  padding: 8px 0px;
}

li {
  display: inline;
  padding: 9px;
}