这是我构建的东西：https://i.imagesup.co/images2/e51854cad0f72ef2900debd5518472d71713cc71.png没有溢出，因为我放入了body标签overflow-x：hidden，这是一种“讨厌”的方式。
我试图将div容器设置为width：100vw，max-width：100vw;但这仍然没有帮助。试图以负的余量和我知道的所有可能的方式来做到这一点，但它仍然会像这样产生溢出：https://i.imagesup.co/images2/794cf0f60d80b8a2de4f5ac44d93579bd50ace2d.png
此浅蓝色部分的相关代码，在此先感谢：
<body>
<div id="divStyle1">
<header>
<h1>
<span>How to <span class="importantH1">ripen Avocado</span> quickly ?</span>
<span><span class="importantH1">RFP bags</span> ripen Avocado within <span class="importantH1">12-24 hours !</span></span>
</h1>
</header>
<main>
<div id="purpuleLineBox">
<div id="purpuleLine1"> <p>100% recyclable and bio-degradable</p> </div>
<div id="purpuleLine2"> <p>Simulates the natural ripening process, organic</p> </div>
<div id="purpuleLine3"> <p>The quickest way to achieve the perfect avocado taste</p> </div>
<div id="purpuleLine4"> <p>Work with Mango, Banana, Peach, and another climacteric fruits</p> </div>
<div id="purpuleLine5"> <p>The user interface on the bag shows when an avocado is fully ripen</p> </div>
</div>
<img id="logoImg" src="Logo.png" alt="">
</main>
</div>
</body>
body {
margin: 0 auto;
}
html {
scroll-behavior: smooth;
}
#divStyle1 {
height: 90vh;
background-color: #016087;
}
h1>span {
display: block;
}
h1 {
color: white;
text-shadow: 2px 2px black;
font-size: 45px;
margin: 0 auto;
}
.importantH1 {
border-bottom: 10px solid #D52C82;
font-size: 53px;
}
.importantH1:hover {
border-bottom: 15px solid #D52C82;
font-size: 55px;
transition-duration: 0.5s;
}
#logoImg {
position: absolute;
right: -20px;
top: 10vh;
transform: rotate(8deg);
border: 20px dashed white;
padding-left: 20px;
padding-bottom: 20px;
padding-bottom: 20px;
}
#purpuleLineBox {
margin-top: 100px;
}
#purpuleLine1 {
background-color: #D52C82;
height: 50px;
width: 34%;
margin-bottom: 30px;
}
#purpuleLine2 {
background-color: #D52C82;
height: 50px;
width: 44%;
margin-bottom: 30px;
}
#purpuleLine3 {
background-color: #D52C82;
height: 50px;
width: 52%;
margin-bottom: 30px;
}
#purpuleLine4 {
background-color: #D52C82;
height: 50px;
width: 58%;
margin-bottom: 30px;
}
#purpuleLine5 {
background-color: #D52C82;
height: 50px;
width: 60%;
margin-bottom: 30px;
}
div>p {
font-size: 30px;
color: white;
text-shadow: 2px 2px black;
font-weight: bold;
margin-top: 0px;
}
这是由于使用绝对定位的right: -20px;和transform: rotate(8deg);的组合，如果删除了转换并将权设置为0，则它不应有空格。
如果要保留这些样式，只需使用overflow-x: hidden;