我正在编写一个前端项目，但是我遇到了一个小错误。当我关闭汉堡菜单导航时，我的主图像变宽了，做了一个奇怪的动作。我试过一些技巧，比如不固定视差图像，但是不起作用。
这是我的主页https://smashstream.netlify.app/
代码如下：

<Box sx={{ display: "flex", flexDirection: "column", height: "100vh" }}>
      {/* <Navbar /> */}
      <Box className="parallax">
        <Box
          sx={{
            display: "flex",
            width: "100%",
            height: "100%",
            position: "absolute",
            alignItems: "center",
            justifyContent: "center",
            flexDirection: "column",
            fontSize: "4rem",
            color: "#F4F4F4",
            zIndex: 10,
          }}
        >
          <Box sx={{background: "#141228", width: "100%", display: "flex", justifyContent: "center"}}> SmashStream </Box>
          <Box sx={{ fontSize: "1.2rem", background: "#141228", width: "100%", display: "flex", justifyContent: "center"}}>
            {" "}
            Show up and share your skils
          </Box>
        </Box>
      </Box>
    </Box>

这是css

html,
body {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-family: "Bebas";
}

#outer-container {
  background: #232651;
}


.parallax {
    /* The image used */
    display: flex;
    flex-direction: column;
    background-image: url("../img/ella-don-Hzh9sbcV0Dg-unsplash.jpg");
  
    /* Set a specific height */
    flex: 1 1 100%;
  
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .parallax::after{
    content: '';
    display: flex;
    position: absolute;
    height: 100vh;
    width: 100%;
    // z-index: 5;
    opacity: 0.5;
    background-color: #000;
    background-size: cover;
}

  .text-nav {
    display: flex;
    position: relative;
    width: fit-content;
    font-size: 2.8rem;
    transition: ease-in-out 0.1ms;
  }

  .text-nav::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 0%;
    background: #50469E;
    // border-radius: 12px;
    transition: all 0.4s ease;
  }
  .text-nav:hover::after {
    width: 100%;
  }
  

/* Position and sizing of burger button */
.bm-burger-button {
    position: fixed;
    width: 36px;
    height: 30px;
    left: 36px;
    top: 36px;
  }
  
  /* Color/shape of burger icon bars */
  .bm-burger-bars {
    background: #50469E;
  }
  
  /* Color/shape of burger icon bars on hover*/
  .bm-burger-bars-hover {
    background: #141228;
  }
  
  /* Position and sizing of clickable cross button */
  .bm-cross-button {
    height: 24px;
    width: 24px;
  }
  
  /* Color/shape of close button cross */
  .bm-cross {
    background: #bdc3c7;
  }

  /*
  Sidebar wrapper styles
  Note: Beware of modifying this element as it can break the animations - you should not need to touch it in most cases
  */
  .bm-menu-wrap {
    position: fixed;
    height: 100%;
  }
  
  /* General sidebar styles */
  .bm-menu {
    background: #141228;
    padding: 2.5em 1.5em 0;
    font-size: 1.15em;
    overflow: unset !important;
  }
  
  /* Morph shape necessary with bubble or elastic */
  .bm-morph-shape {
    fill: #373a47;
  }
  
  /* Wrapper for item list */
  .bm-item-list {
    color: #b8b7ad;
    padding: 0.8em;
  }
  
  /* Individual item */
  .bm-item {
    display: inline-block;
  }
  
  /* Styling of overlay */
  .bm-overlay {
    background: rgba(0, 0, 0, 0.3);
  }

请救救我！