幾天來，我試圖消除網站上的水平滾動，但我無法做到。這是它的代碼筆：
編輯2
.separator {
width: 100%;
height: 1px;
background-color: #D5D5D5;
}
而不是寬度 100vw 這里給出 100%
uj5u.com熱心網友回復：
所以，問題是你使用width: 100vw;forbody和.seperatorclass。只需將它們更改為width: 100%;.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
line-height: 1.25;
}
body{
font-family: gimlet-text, serif;
font-size: 16px;
font-weight: 400;
color: #344559;
min-height: 100vh;
width: 100%;
}
/* Hero Section */
.sec1{
background-color: #F7F6F4;
}
.sec1__wrap{
display: flex;
flex-direction: column;
margin: 0 15px;
padding: 50px 0;
}
.sec1__wrap__img{
height: 250px;
width: 100%;
object-fit: cover;
object-position: center;
}
.sec1__wrap__h1{
font-size: 48.83px;
font-family: balboa, sans-serif;
font-weight: 600;
margin: 25px 0 15px 0;
}
.sec1__wrap__p{
margin-bottom: 20px;
}
.sec1__wrap__wrap{
display: flex;
gap: 20px;
align-items: center;
}
.sec1__wrap__wrap__btn1{
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
background-color: #F9826A;
padding: 10px 20px;
}
.sec1__wrap__wrap__btn1__text{
font-size: 12.8px;
color: #F7F6F4;
font-weight: 500;
}
/* .sec1__wrap__wrap__btn1__img{
} */
.sec1__wrap__wrap__btn2{
font-size: 12.8px;
color: #F9826A;
text-decoration: underline;
font-weight: 500;
}
/* Section Separator */
.separator{
width: 100%;
height: 1px;
background-color: #D5D5D5;
}
/* Website Section 2: Services */
.sec2{
background-color: #F7F6F4;
}
.sec2__wrap{
display: flex;
flex-direction: column;
padding: 40px 15px;
}
.sec2__wrap__box-wrap{
background-color: #fff;
border-radius: 20px 20px 0 20px;
overflow: hidden;
/* display: flex;
flex-direction: column; */
}
.sec2__wrap__box-wrap__img{
height: 200px;
width: 100%;
object-fit: cover;
object-position: center;
}
.sec2__wrap__box-wrap__h3{
font-size: 31.25px;
font-family: balboa, sans-serif;
font-weight: 600;
margin: 20px 0 10px 0;
}
.sec2__wrap__box-wrap__dash{
width: 100px;
height: 3px;
background-color: #F9826A;
margin-bottom: 15px;
}
.sec2__wrap__box-wrap__p{
margin-bottom: 30px;
}
.sec2__wrap__box-wrap__btn-wrap{
background-color: #F9826A;
gap: 10px;
}
.sec2__wrap__box-wrap__btn-wrap__p{
color: #fff;
font-weight: 500;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.typekit.net/btg4pzb.css">
</head>
<body>
<section class="sec1">
<div class="sec1__wrap">
<img src="/Images/1. Home/hero.jpg" class="sec1__wrap__img">
<h1 class="sec1__wrap__h1">The Best Freight Solution Company</h1>
<p class="sec1__wrap__p">We provide the most specialized and helpful experience by removing hassle associated with your transportation needs.</p>
<div class="sec1__wrap__wrap">
<a href="#"><div class="sec1__wrap__wrap__btn1">
<p class="sec1__wrap__wrap__btn1__text">Contact Us Today!</p>
<img src="/Images/1. Home/hero mail.svg" class="sec1__wrap__wrap__btn1__img">
</div></a>
<a href="#"><div class="sec1__wrap__wrap__btn2">Apply for job</div></a>
</div>
</div>
</section>
<div class="separator"></div>
<section class="sec2">
<div class="sec2__wrap">
<div class="sec2__wrap__box-wrap box1">
<img class="sec2__wrap__box-wrap__img" src="/Images/1. Home/image1.jpg">
<h3 class="sec2__wrap__box-wrap__h3">Freight Transportation</h3>
<div class="sec2__wrap__box-wrap__dash"></div>
<p class="sec2__wrap__box-wrap__p">Our company specializes in delivery across multi road transportation platform while providing most competitive rates in the industry.</p>
<div class="sec2__wrap__box-wrap__btn-wrap">
<a href="#">
<p class="sec2__wrap__box-wrap__btn-wrap__p">Request a Quote</p>
</a>
<a href="#">
<img class="sec2__wrap__box-wrap__btn-wrap__img" src="/Images/1. Home/arrow1.svg">
</a>
</div>
</div>
</div>
</section>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/438229.html