“反应不够”？

Question

我正在编写我的第一个项目，我有两个问题。

1. 我想让网页响应。 我使用了手机尺寸 (360px) 和平板电脑尺寸 (768px)，我的笔记本电脑尺寸是基本尺寸。 现在这是我的问题：三种尺寸之间的过渡并不完美，因为一个图像总是与另一个东西重叠。

2. 当我关闭菜单时，网页会稍微跳动（我不知道还能怎么形容）并且滚动条会暂时可见。该页面不应该那样做。

有人可以帮帮我吗？ 正如我所说，我是一个完全的初学者，所以我确信，我可以做得更好。

@import url('https://fonts.googleapis.com/css?family=Libre+Caslon+Text:400,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Noto+Serif+Lao&family=Poppins:wght@100&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Calistoga&family=Great+Vibes&family=Noto+Serif+Lao&family=Poppins:wght@100&display=swap');
body {
  font-family: Libre Caslon Text;
  background-color: #634135;
}

.body-text {
  padding-top: 20vh;
  text-align: center;
  position: relative;
}

.hamburger-icon {
  z-index: 1;
  top: 5vh;
  left: 5vw;
  padding-bottom: 2vh;
  position: fixed;
}

.hamburger-icon span {
  height: 5px;
  width: 40px;
  background-color: white;
  display: block;
  margin: 5px 0px 5px 0px;
  transition: 0.7s ease-in-out;
  transform: none;
}

#openmenu:checked~.menu-pane {
  left: -5vw;
  transform: translateX(-5vw);
  position: fixed;
}

#openmenu:checked~.body-text {
  display: none;
}

#openmenu:checked~.hamburger-icon span:nth-of-type(2) {
  transform: translate(0%, 175%) rotate(-45deg);
  background-color: white;
}

#openmenu:checked~.hamburger-icon span:nth-of-type(3) {
  transform: rotate(45deg);
  background-color: white;
}

#openmenu:checked~.hamburger-icon span:nth-of-type(1) {
  opacity: 0;
}

#openmenu:checked~.hamburger-icon span:nth-of-type(4) {
  opacity: 0;
}

div.menu-pane {
  background-color: #dfa3a3;
  position: absolute;
  transform: translateX(-105vw);
  transform-origin: (0, 0);
  width: 100vw;
  height: 100%;
  transition: 0.6s ease-in-out;
  top: 0;
  cursor: default;
}

.menu-pane p {
  color: black;
  font-size: 0.6em;
}

.menu-pane nav {
  padding: 10%;
}

.menu-links li,
a,
span {
  transition: 0.5s ease-in-out;
}

.menu-pane ul {
  padding: 10%;
  display: inline-block;
}

.menu-pane li {
  padding-top: 10px;
  padding-bottom: 20px;
  margin-left: 10px;
  font-size: 1.5em;
}

.menu-pane li:first-child {
  font-size: 1.9em;
  margin-left: -10px;
}

.menu-links li a {
  color: white;
  text-decoration: none;
}

.menu-links li:hover a {
  color: black;
}

.menu-links li:first-child:hover a {
  color: black;
  background-color: #dfa3a3;
  cursor: pointer;
}

.menu-links li:first-child:hover #QC-info {
  opacity: 1;
}

.menu-links li:first-child:hover #DC-info {
  opacity: 1;
}

#QC-info {
  background-color: #dfa3a3;
  border: 2px solid;
  border-color: #dfa3a3;
  display: block;
  opacity: 0;
}

.menu-links li:first-child a {
  padding: 5px;
}

input.hamburger-checkbox {
  position: absolute;
  z-index: 3;
  top: 5vh;
  left: 5vw;
  width: 10vw;
  opacity: 0;
  height: 6vh;
  cursor: pointer;
}

.container {
  width: 100%;
  height: 100%;
  background-color: #634135;
}

.house {
  width: 38%;
  position: fixed;
  top: 0;
  left: -50px;
  height: 100%;
}

#inner {
  width: 70%;
  height: 100%;
  left: 30%;
  top: 0;
  right: 0;
  bottom: 0;
  position: fixed;
  background: #634135;
  overflow: hidden;
}

div.seulement {
  font-family: 'Great Vibes', serif;
  font-size: 600%;
  height: 12%;
  color: white;
  cursor: default;
  margin: 20px auto 15px 50px;
}

div.elle {
  font-family: 'Calistoga', serif;
  color: white;
  font-size: 500%;
  height: 10%;
  cursor: default;
  margin: 10px auto 5px 50px;
}

div.savePlace {
  font-family: 'Calistoga', serif;
  font-size: 130%;
  color: white;
  cursor: default;
  margin: 40px auto 10px 50px;
}

div.female {
  position: fixed;
  left: 31%;
  top: 50%;
}

.women {
  width: 40%;
  position: fixed;
  top: 148px;
  right: 75px;
  margin-left: 40%;
}

@media only screen and (max-width: 360px) {
  #inner {
    z-index: 1;
    left: 0;
    width: 100%;
  }
  div.seulement,
  div.elle,
  div.savePlace {
    margin-left: 90px;
  }
  div.seulement {
    font-size: 300%;
    margin: 28px auto -15px 40px;
  }
  div.elle {
    font-size: 200%;
    margin: -20px auto 0 40px;
  }
  div.savePlace {
    font-size: 100%;
    margin: -10px auto 10px 40px;
  }
  div.female {
    margin: 20px auto auto 20px;
  }
  .women {
    width: 40%;
    position: fixed;
    margin: 20px auto 10px 50px;
  }
}

@media only screen and (max-width: 768px) {
  #inner {
    z-index: 1;
    left: 0;
    width: 100%;
  }
  div.seulement,
  div.elle,
  div.savePlace {
    margin-left: 90px;
  }
  div.female {
    left: 7%;
  }
  .women {
    position: fixed;
    width: 55%;
    left: 20px;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="UTF-8">
  <link rel="stylesheet" href="styles.css">
  <link rel="icon" href="favicon.ico">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  <title>Seulement Elle | Home</title>
</head>

<body>
  <!-- Webpage -->
  <div class="container">
    <img class="house" alt="house" src="https://i.pinimg.com/564x/a0/d9/2c/a0d92c523fc1f9bb3b270b04a445d067.jpg">
    <div id="inner">
      <img class="women" alt="women at home" src="Pictures/women.png">
      <div class="seulement">Seulement</div>
      <div class="elle">ELLE</div>
      <div class="savePlace">A save place for her</div>
      <div class="female">
        <img alt="female" src="Pictures/female.png">
      </div>
    </div>
  </div>
  <!-- Navbar -->
  <div class="menu-container">
    <input type="checkbox" id="openmenu" class="hamburger-checkbox">
    <div class="hamburger-icon">
      <label for="openmenu" id="hamburger-label">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </label>
    </div>
    <div class="menu-pane">
      <nav>
        <ul class="menu-links">
          <li>
            <a href="index.html">Home</a>
            <span id="QC-info">
                                <p>Old Evergreen</p>
                            </span>
          </li>
          <li>
            <a href="ellesLife.html">ELLEs life</a>
          </li>
          <li>
            <a href="prices.html">Pricing</a>
          </li>
          <li>
            <a href="q&a.html">Q&A</a>
          </li>
        </ul>
        <ul class="menu-links">
          <li>
            <a href="aboutUs.html">About us</a>
            <span id="QC-info">
                                <p>[phone]</p>
                            </span>
          </li>
          <li>
            <a href="aboutUs.html">This is us</a></li>
          <li>
            <a href="aboutUs.html">Contact us</a>
          </li>
          <li>
            <a href="aboutUs.html">Jobs</a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
  <script type="text" src="index.js"></script>
</body>

</html>

我想优化三种尺寸之间的过渡，从而让我的网页更专业。

我想在不显示滚动条的情况下关闭菜单。