Html 我的布局添加了水平滚动，有些元素没有居中

好吧，我真的很生气。我希望我的所有元素在较小的设备上水平放置在页面中心。但其中一些会稍微移到一边。我的布局是添加水平滚动。这就像有什么东西在屏幕上消失，但我不知道是什么。此外，“关于我们”部分中的图标没有垂直居中。我错过了什么？任何帮助都将不胜感激，因为我正在失去耐心，我不想让它保持原样

编辑：好的，我设法解决了重叠问题。导航菜单引起了骚动。添加了溢出：隐藏，解决了这个问题。现在剩下的是嵌套在.flexing和.grid中的div稍微向左。需要在中心

---

我怀疑你的.container类可能导致了定心问题，它的宽度是80%。这是可行的，但如果它是100%，则更容易使用，然后在屏幕的每一侧都使用填充或边距值。例如，每边都有自动边距，每边都可以使用5%的边距。如果您必须在整个页面上使用overflow:hidden，则说明出现了问题，这意味着问题将传播。撤消溢出：隐藏并尝试查找向右突出的元素。这是错误的因素。容器可能是这个太宽元素的80%，其中的所有内容都会稍微偏离中心。

Fyi，标题标签没有关闭。是的，我只是没有正确复制它。：）将其添加到您的问题中。链接或代码笔示例将有助于编辑问题。正如我所提到的，导航菜单在右侧突出。所以，我添加了溢出：隐藏到它。让我困惑的是，有时缩小页面时，它看起来很好，有时却不好。也许是浏览器？或者是宽度有问题，但什么呢？至于定心部分，我增加了左边的边距：5%aa，这似乎有效。这可能有点“粗糙”，但如果它有效且合法，我会接受它。正如我所提到的，如果导航菜单向右突出，那就是一个错误，因为html或css的结构很糟糕。健康网页上不存在不必要的溢出。首先应该修复该错误，然后后续错误可能更容易修复。

 <header>
            <nav id="myNav">
                <div class="menu-icon" onclick="myFunction()">
                    <i class="fa fa-bars fa-2x"></i>
                </div>
                <div class="logo">
                    <img src="images/logo.png" alt="LOGO">
                </div>
                <div class="top-nav">
                    <ul class="menu">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Blog</a></li>
                        <li><a href="#">Work</a></li>
                    </ul>
                </div>
            </nav><br>
      </header>  

<div class="aboutus">
    <div class="container">
        <h2>About us</h2>
        <hr>
        <h5 style="word-break: keep-all;">Lorem ipsum dolor sit amet consectetur adipisicing elit.</h5>
        <section class=" flexing">
            <div data-aos="fade-right">
                <i class="fa fa-rocket" aria-hidden="true"></i>
                <h3>Lorem ipsum</h3>
                <p>Nam varius accumsan elementum. Aliquam fermentum eros in suscipit scelerisque.</p>
            </div>
            <div data-aos="fade-right">
                <i class="fa fa-sun-o" aria-hidden="true"></i>
                <h3>Lorem ipsum</h3>
                <p>Nam varius accumsan elementum. Aliquam fermentum eros in suscipit scelerisque.</p>
            </div>
            <div data-aos="fade-right">
                <i class="fa fa-google-wallet" aria-hidden="true"></i>
                <h3>Lorem ipsum</h3>
                <p>Nam varius accumsan elementum. Aliquam fermentum eros in suscipit scelerisque.</p>
            </div>
            <div data-aos="fade-right">
                <i class="fa fa-trophy" aria-hidden="true"></i>
                <h3>Lorem ipsum</h3>
                <p>Nam varius accumsan elementum. Aliquam fermentum eros in suscipit scelerisque.</p>
            </div>

        </section>
        <div class="item-link">
            <!-- <div> -->
                <a href="#">Learn more</a>
            <!-- </div> -->
        </div>
    </div>
</div>

<div class="lorem" id="work">
    <div class="container" data-aos="fade-left">
        <div class="grid ipsum">
            <div class="pic">
                <img src="images/kamera.jpg" alt="">
            </div>
            <div class="lorem-text1">
                <h2>Lorem ipsum</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque elementum augue sed est
                    porttitor, ac blandit nisl posuere. Pellentesque hendrerit suscipit mi eu lobortis.
                    Curabitur consectetur enim id elementum accumsan. Quisque metus purus, iaculis id tincidunt
                    non, blandit quis sapien. </p>
                <a href="#">Learn more</a>
            </div>
        </div>
    </div>
</div>

<div class="lorem" id="dorem">
    <div class="container" data-aos="fade-left">
        <div class="grid dorem">
            <div class="lorem-text2">
                <h2>Dolor sit amet</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque elementum augue sed est
                    porttitor, ac blandit nisl posuere. Pellentesque hendrerit suscipit mi eu lobortis.
                    Curabitur consectetur enim id elementum accumsan. Quisque metus purus, iaculis id tincidunt
                    non, blandit quis sapien. </p>
                <a href="#">Learn more</a>
            </div>
            <div class="pic">
                <img src="images/laptop.jpg" alt="">
            </div>
        </div>
    </div>
</div>

 html,
 body {
  margin: 0;
  padding: 0;
  width: 100%;
}

body {
  font-family: Raleway, Raleway-Bold, Raleway-ExtraLight, ProximaNova- 
 Regular;
  font-weight: lighter;
}

header {
  width: 100%;
  height: 100vh;
}


.logo {
  line-height: 60px;
  position: fixed;
  float: left;
  margin: 16px 46px;
}

/* NAVIGATION MENU */
nav {
  position: fixed;
  width: 100%;
  line-height: 60px;
  transition: all 1s;
  z-index: 3;
}

nav ul {
  line-height: 60px;
  list-style: none;
  overflow: hidden;
  color: #fff;
  padding: 0;
  text-align: right;
  margin: 0;
  padding-right: 40px;
  transition: 0.5s;
  overflow: hidden;
}

.menu li:hover {
  background-color: rgba(240, 255, 255, 0.3);
}

nav ul li {
  display: inline-block;
  padding: 16px 40px;
}

.menu a {
  text-decoration: none;
  color: #fff;
  font-size: 16px;
}

.scroll {
  background-color: black;
}

.menu-icon {
  line-height: 60px;
  max-width: 100%;
  background: #000;
  text-align: right;
  box-sizing: border-box;
  padding: 15px 24px;
  cursor: pointer;
  color: #fff;
  display: none;
}



   
/* ABOUT US */

hr {
  height: 1px;
  background-color: lightgreen;
  border: none;
  width: 50px;
}

h2, h5 {
  text-align: center;
  color: grey;
}

.container {
  text-align: center;
  margin-top: 60px;
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
  width: 80%;
}

.aboutus {
  margin-bottom: 50px;
}

.flexing {
  display: flex;
  margin-top: 70px;
  justify-content: center;
}

.flexing i {
  display: flex;
  line-height: inherit;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: whitesmoke;
  align-items: center;
  justify-content: center;
  font-size: 60px;
  color: grey;
  margin: auto;
}

.flexing i:hover {
background: lightgreen;
color: white;
transition: all 0.5s;
}

.aboutus a {
  width: 180px;
  border: 2px solid white;
  color: white;
  background: lightgreen;
  border-radius: 50px;
  display: block;
  margin: 100px auto 0;
  padding: 10px 0;
  text-decoration: none;
}

.aboutus a:hover {
  background: black;
  color: white;
  transition: all 0.5s;
}

/* LOREM IPSUM PART */

.grid {
    display: flex;
    justify-content: space-between;
}

.lorem {
    background: white;
    padding: 10px 0 40px;
  flex: 1;
  margin-top: 0px;
}

.lorem img {
  display: block;
  margin-top:70px;
  max-width: 600px;
    height: auto;
}

.lorem h2 {
    font-size: 60px;
    line-height: 96px;
    font-weight: 200;
}

.lorem p {
    padding: 50px 0;
}

.lorem a {
    width: 180px;
    border: 2px solid white;
    color: white;
    background: lightgreen;
    border-radius: 50px;
    display: block;
    text-align: center;
  padding: 10px 0;
  text-decoration: none;
}

.lorem a:hover {
    background: black;
    color: white;
    transition: all 0.5s;
}

#work {
    background: rgb(238, 237, 237);
}

.lorem-text1 {
    margin-left: 45px ;
}

.lorem-text2 {
    margin-right: 45px;
}


@media (min-width: 768px) {
  .container {
    width: 750px;
  }
  }
  @media (min-width: 992px) {
  .container {
    width: 970px;
  }
  }
  @media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
  }


/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 769px) {
 header {
  width: 100%;
 }

header.sticky {
  padding: 5px 0;
}

.logo {
  position: fixed;
  top: 0;
  margin-top: 16px;
}

nav ul {
  max-height: 0px;
  background: #000;
}

.show-menu {
  max-height: 400px;
}

.menu li:hover {
  background-color: grey;
}

nav ul li {
  box-sizing: border-box;
  width: 100%;
  padding: 15px;
  text-align: center;
  display: block;
}

nav ul li a {
  display: block;
  font-size: 20px !important;
  font-weight: bold;
}

.menu-icon {
  display: block;
}


.logo h1 a img {
  padding-top: 5px;
}

/* ABOUT US */

.aboutus {
  padding: 30px 0;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
}

.aboutus h2 , .lorem h2 {
  font-size: 40px;
  line-height: 58px;
}

.aboutus h2, .aboutus h5 {
  margin-left: auto;
  margin-right: auto;
}

/* .aboutus p.top {
  padding: 35px 0 30px;
} */

.aboutus i {
  width: 125px;
  height: 125px;
  padding-top: 8%;
}

.aboutus h3 {
  padding: 20px 0 20px;
}

.aboutus p {
  padding-bottom: 20px;
  margin: auto;
}

.aboutus a {
  margin: 25px auto 0;
}

.container {
  max-width: 100%;
}

section.item {
  text-align: center;
}

.flexing i {
  align-items: center;
  height: 100px;
}

/* LOREM */

.lorem p {
  padding: 10px 0;
}

.lorem {
  padding: 30px 0;
  width: 100%;
  margin-top: -30px;
}

.lorem img {
  width: 100%;
  margin-top: 0px;
  margin-left: auto;
  margin-right: auto;
}

.lorem-text1 {
  margin: auto;
  width: 90%;
  text-align: center;  
  word-wrap: break-word;
}

.lorem-text2 {
  margin: auto;
  width: 90%;
  text-align: center;
  word-wrap: break-word;
}

.flexing {
  flex-direction: column;
  width: 100%;
}

.flexing div {
  width: 90%;;
}

.grid {
  flex-direction: column;
  width: 90%;
}

#dorem a{
  margin-bottom: 30px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  
}

#work {
  background: white;  
}

#work a {
  margin: auto;
}

.dorem {
  /* display: flex; */
  flex-direction: column-reverse;
  /* margin: auto; */
}

}

@media only screen and (max-width: 990px){
  .lorem p {
    padding: 10px 0;
  }
  
  .lorem {
    padding: 30px 0;
    width: 100%;
    margin-top: -30px;
  }
  
  .lorem img {
    width: 100%;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .lorem-text1 {
    margin: auto;
    width: 90%;
    text-align: center;  
    word-wrap: break-word;
  }
  
  .lorem-text2 {
    margin: auto;
    width: 90%;
    text-align: center;
    word-wrap: break-word;
  }
  
  .flexing {
    flex-direction: column;
    width: 100%;
  }
  
  .flexing div {
    width: 90%;;
  }
  
  .grid {
    flex-direction: column;
    width: 90%;
  }
  
  #dorem a{
    margin-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    
  }
  
  #work {
    background: white;  
  }
  
  #work a {
    margin: auto;
  }
  
  .dorem {
    /* display: flex; */
    flex-direction: column-reverse;
    /* margin: auto; */
}

}