网页的宽度大于100％

Question

我一直在stackoverflow中搜索有关此问题的信息，但仍然存在。我不了解它是如何工作的，因为我还是HTML和CSS语言的初学者。我找不到解决方法，它的宽度仍然超过100％...

任何解决方案或建议都非常感谢:)））谢谢。

这是我的HTML代码：

@import url('https://fonts.googleapis.com/css?family=Playfair+Display&display=swap');

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-feature-settings: auto;
    font-feature-settings: auto;
    -webkit-font-kerning: auto;
    font-kerning: auto;
    line-height: 40.677px;
    line-height: 2.54237rem;
    
}
html, body{
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
  
}
body{
    display: flex; /* or css grid for more intricate layouts */
    flex-direction: column;
    margin: 0;
    padding: 0;
    min-width: fit-content;
}

.content1 {
    width: 100vw;
    height: 900px;
    min-height: fit-content;
    max-height: 100%;
    padding: 0%;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0 auto;
    background: #255F63;

   
}
.content2{

position: absolute;
height: 1000px;
left: 0px;
top: 900px;

background: #DB7B65;
}
.content3{

    position: absolute;
    height: 1942px;
    left: 0px;
    top: 1900px;
    
    background: #ECB865;
}
.container1-content3{

position: absolute;
height: 1063px;
left: 0px;
top: 1px;

background: #ECB865;
}
.container1-content3>.headline{

    position: absolute;
    width: 434.89px;
    height: 72.61px;
    left: 205.93px;
    top: 167.52px;
    
    font-family: Playfair Display;
    font-style: normal;
    font-weight: bold;
    font-size: 48px;
    line-height: 64px;
    text-align: center;
    
    color: #DB7B65;
    
}
.container1-content3>h2{
    position: absolute;
width: 1233px;
height: 143px;
left: 107px;
top: 863px;

font-family: Playfair Display;
font-style: normal;
font-weight: bold;
font-size: 36px;
line-height: 48px;
text-align: justify;

color: #E5E5E5;

}
.container2-content3{

position: absolute;
height: 878px;
left: 0px;
top: 1064px;
}
.content4{

    position: absolute;
    height: 1038px;
    left: 0px;
    top: 3842px;
    
    background: #695356;
}
.headline1> h1{
    position: absolute;
width: 708px;
height: 192px;
left: 154px;
top: 190px;

font-family: Playfair Display;
font-style: normal;
font-weight: bold;
font-size: 72px;
line-height: 96px;

color: #ECB865;
}
.headline1>h2{

position: absolute;
width: 489px;
height: 128px;
left: 154px;
top: 382px;

font-family: Playfair Display;
font-style: normal;
font-weight: normal;
font-size: 48px;
line-height: 64px;

color: #FBC9BE;

}


.headline2>h1{
    
    position: absolute;
    width: 387px;
    height: 96px;
    left: 137px;
    top: 207px;
    
    font-family: Playfair Display;
    font-style: normal;
    font-weight: bold;
    font-size: 72px;
    line-height: 96px;
    /* identical to box height */
    
    
    color: #FBC9BE;
    
    }
    .headline2>h2{
        position: absolute;
    width: 531px;
    height: 64px;
    left: 137px;
    top: 303px;
    
    font-family: Playfair Display;
    font-style: normal;
    font-weight: normal;
    font-size: 48px;
    line-height: 64px;
    /* identical to box height */
    
    
    color: #ECB865;
    
    }
    .headline2>h3{
    
    position: absolute;
    width: 657px;
    height: 192px;
    left: 137px;
    top: 441px;
    
    font-family: Playfair Display;
    font-style: normal;
    font-weight: normal;
    font-size: 36px;
    line-height: 48px;
    text-align: justify;
    
    color: #E5E5E5;
    }
    .headline2>h4{
        position: absolute;
    width: 340px;
    height: 24px;
    left: 137px;
    top: 697px;
    
    font-family: Playfair Display;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 24px;
    /* identical to box height */
    
    font-variant: small-caps;
    
    color: #E5E5E5;
    }
    .headline3{

position: absolute;
width: 1248px;
height: 210px;
left: 95px;
top: 56px;

    }
    .headline3>h1{
        position: absolute;
        width: 489px;
        height: 96px;
        left: 475px;
        top: 56px;
        
        font-family: Playfair Display;
        font-style: normal;
        font-weight: bold;
        font-size: 72px;
        line-height: 96px;
        /* identical to box height */
        
        
        color: #ECB865;
        
    }
    .headline3>h2{

position: absolute;
width: 1248px;
height: 95px;
left: 95px;
top: 171px;

font-family: Playfair Display;
font-style: normal;
font-weight: normal;
font-size: 36px;
line-height: 48px;
text-align: center;

color: #E5E5E5;

    }
    .headline3b{

position: absolute;
width: 460px;
height: 48px;
left: 474px;
top: 305px;

    }
    .headline3b>.btn-learn{
        position: absolute;
width: 194px;
height: 48px;
left: 474px;
top: 305px;

font-family: Playfair Display;
font-style: normal;
font-weight: bold;
font-size: 36px;
line-height: 48px;
/* identical to box height */

text-align: justify;

color: #ECB865;

    }
    .headline3b>.btn-shop{

position: absolute;
width: 164px;
height: 48px;
left: 770px;
top: 305px;

font-family: Playfair Display;
font-style: normal;
font-weight: bold;
font-size: 36px;
line-height: 48px;
/* identical to box height */

text-align: justify;

color: #ECB865;

    }
    /*# sourceMappingURL=styles.css.map */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome</title>
    <link rel="stylesheet" href="styles.css">
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/uikit.min.css" />

<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit-icons.min.js"></script>
</head>

<body>
       <div class="content1">
           <div class="headline1">
               <h1>Let’s see,
                What fucking happen</h1>
                <h2>in the world that never
                    we see before</h2>
           </div>
       </div>
       <div class="content2">
           <div class="headline2">
               <h1>Seventeen - </h1>
               <h2>wear something you love</h2>
               <h3>
                Jadi gini gais, kita adalah faishionistha yang kecebadai dan terkenal gile banget anjir. Bisa nih jadi referensi buat kamu yang lagi bosen sama lo pada anjay!
               </h3>
               <h4>
                a girl sitting on chair - 24-03-2020
               </h4>
           </div>
       </div>
       <div class="content3">
           <div class="container1-content3">
               <span class="headline">
                Simple yet pretty.
               </span>
               <h2>
                Jadi gini gais, kita adalah faishionistha yang kecebadai dan terkenal gile banget anjir. Bisa nih jadi referensi buat kamu yang lagi bosen sama lo pada anjay!
               </h1>
           </div>
           <div class="container2-content3">

           </div>
       </div>
       <div class="content4">
           <div class="headline3">
            <h1>pre-order now</h1>
            <h2>Jadi gini gais, kita adalah faishionistha yang kecebadai dan terkenal gile banget anjir.</h2>
           </div>
           <div class="headline3b">
                <span class="btn-learn">Learn More</span>
                <span class="btn-shop">Shop Now</span>
           </div>
       </div>
    </body>
</html>

Answer 1

您需要将以下内容添加到body标签css：

overflow-x: hidden;