我的背景宽度在移动设备上未覆盖 100%
My background width don't cover 100% on mobile devices
当我在移动设备上使用我的网站时，容器的宽度没有覆盖主体的 100%。我将宽度设置为 100%，我试图将 min-width 放在 body 上，但屏幕右侧有白线。我也尝试过更改视口宽度，但那不起作用。
*{
margin: 0;
padding: 0;
}
body{
font-family: 'Bai Jamjuree', sans-serif;
overflow-x: hidden;
min-width: 1050px;
}
h1{
color: #535a62;
}
p{
font-weight: 600;
color: #a6a7a9;
}
.header{
background: url("https://via.placeholder.com/1200");
background-size: cover;
height: 300px;
padding: 130px 0 0 0;
}
.logo{
margin: auto;
width: 125px;
height: 125px;
}
.title{
width: 690px;
height: 225px;
margin: auto;
margin-bottom: 100px;
}
.title-text h1{
text-align: center;
margin-bottom: 35px;
font-size: 2.75rem;
}
.title-text p{
text-align: center;
font-size: 1.25rem;
margin-bottom: 50px;
}
.title-buttons{
margin: auto;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 170px;
}
.download-ios button,
.download-mac button{
display: inline;
margin-right: 20px;
height: 50px;
width: 225px;
border-radius: 30px;
outline: none;
border: none;
font-size: 18px;
color: #fff;
padding: 10px 20px;
transition: 0.2s;
}
.download-ios button{
background-color: #26bba5;
border-bottom: 3px solid #18a08c;
}
.download-mac button{
background-color: #6174ff;
border-bottom: 3px solid #5362d7;
}
.computer-div{
margin-top: 500px;
position: relative;
}
.computer-image img{
display: inline;
margin-left: -30px;
width: 900px;
margin-bottom: 100px;
}
.all-searches-container{
position: absolute;
top: 50px;
right: 265px;
}
.search-div{
width: 350px;
}
.search-div h1{
margin-bottom: 15px;
}
.search-div p{
margin-bottom: 50px;
}
.title-img{
margin: auto;
display: flex;
justify-content: center;
align-items: center;
margin-top: 100px;
margin-bottom: 100px;
}
.sections{
position: relative;
display: inline;
margin-top: 200px;
margin-bottom: 200px;
}
.section{
display: inline;
width: 300px;
margin-right: 50px;
}
section h1,
.section p{
text-align: center;
width: 300px;
}
.section h1{
margin-bottom: 15px;
}
.section p{
margin-bottom: 20px;
}
.first h1,
.third h1{
padding-left: 40px;
}
.img-div{
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
/*.first{
position: absolute;
top: 50%;
left: -25%;
transform: translate(-25%, -50%);
}
.second{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.third{
position: absolute;
top: 50%;
left: 100%;
transform: translate(-25%, -50%);
}*/
.web-sites{
margin: auto;
margin-top: 1300px;
width: 100%;
padding-left: 200px;
margin-bottom: 150px;
}
.web-site{
display: inline-block;
width: 100px;
margin-right: 190px;
}
.download-ios :hover{
background-color: #5dccbb;
}
.download-mac :hover{
background-color: #8896ff;
}
.footer{
background-color: #f5f6f8;
padding: 25px 150px 20px 150px;
position: relative;
height: 100%;
}
.footer div,
.footer ul{
display: inline-block;
}
.logo-footer{
height: 100%;
width: 300px;
}
.logo-footer img{
width: 50px;
height: 50px;
}
ul{
list-style: none;
display: inline;
margin-top: 30px;
width: 200px;
}
li{
margin-right: 50px;
margin-bottom: 40px;
transition: 0.2s;
}
.social-media{
position: absolute;
right: 150px;
top: 100px;
}
ul :hover{
color: #33b295;
cursor: pointer;
}
.media-icon{
margin-right: 30px;
}
.media-icon svg :hover{
fill: #33b295;
}
@media screen and (max-width:600px){
.title, .computer-image img, .search-div{
width: 100%;
}
.section{
display: block;
top: 50%;
}
}
<!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">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@400;600&display=swap" rel="stylesheet">
<title>Clipboard</title>
</head>
<body>
<div class="header">
<div class="logo">
<img src="images/logo.svg" alt="">
</div>
</div>
<div class="main">
<div class="title">
<div class="title-text">
<h1>A history of everything you copy</h1>
<p>Clipboard allows you to track and organize everything you copy.
Instantly acces your clipboard on all your devices.
</p>
</div>
<div class="title-buttons">
<div class="download-ios">
<button>Download for iOS</button>
</div>
<div class="download-mac">
<button>Download for Mac</button>
</div>
</div>
<div class="title-text">
<h1>Keep track of your snippets</h1>
<p>Clipboard instantly stores any item you copy in the cloud,
meaning you can acces your snippets immediatly on all your devices.
Our Mac and iOS apps will help you organize everything.
</p>
</div>
</div>
<div class="computer-div">
<div class="computer-image">
<img src="images/image-computer.png" alt="">
</div>
<div class="all-searches-container">
<div class="search-div">
<h1>Quick Search</h1>
<p>Easily search your snippets by content,
category, web address, application, and more.
</p>
</div>
<div class="search-div">
<h1>iCLoud Sync</h1>
<p>Instantly saves and syncs snippets across all your devices.</p>
</div>
<div class="search-div">
<h1>Complete History</h1>
<p>Retrive any snippets from the first moment you started using app.</p>
</div>
</div>
<div class="title">
<div class="title-text">
<h1>Acces clipboard anywhere</h1>
<p>Whether you're on the go, or at your computer,
you can acces all your Clipboard snippets in a
few simple clicks.
</p>
</div>
<div class="title-img">
<img src="images/image-devices.png" alt="">
</div>
<div class="title-text">
<h1>Supercharge your workflow</h1>
<p>We've got tools to boost your productivity.</p>
</div>
<div class="sections">
<div class="section first">
<img src="images/icon-blacklist.svg" alt="">
<h1>Create blacklists</h1>
<p>Ensure sensitivite information never
makes its way to your clipboard by excluding
certain sources.
</p>
</div>
<div class="section second">
<img src="images//icon-text.svg" alt="">
<h1>Plain text snippets</h1>
<p>Remove unwanted formatting from copied
text for a consistent look.
</p>
</div>
<div class="section third">
<img src="images/icon-preview.svg" alt="">
<h1>Sneak preview</h1>
<p>Quick preview of all snippets on your Clipboard
for easy acces.
</p>
</div>
</div>
</div>
<div class="web-sites">
<div class="web-site">
<img src="images/logo-google.png" alt="">
</div>
<div class="web-site">
<img src="images/logo-ibm.png" alt="">
</div>
<div class="web-site">
<img src="images/logo-microsoft.png" alt="">
</div>
<div class="web-site">
<img src="images/logo-hp.png" alt="">
</div>
<div class="web-site">
<img src="images/logo-vector-graphics.png" alt="">
</div>
</div>
</div>
<div class="title">
<div class="title-text">
<h1>Clipboard for iOS and Mac OS</h1>
<p>Avaible for free on App Store. Download for Mac or iOS, sync
with iCloud and you're ready to start adding to your clipboard.
</p>
</div>
<div class="title-buttons">
<div class="download-ios"><button>Download for iOS</button></div>
<div class="download-mac"><button>Download for Mac</button></div>
</div>
</div>
</div>
<div class="footer">
<div class="logo-footer">
<img src="images/logo.svg" alt="">
</div>
<ul>
<li>FAQs</li>
<li>Contact Us</li>
</ul>
<ul>
<li>Privacy Policy</li>
<li>Press Kit</li>
</ul>
<ul>
<li>Install Guide</li>
</ul>
<div class="social-media">
<div class="media-icon">
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M22.675 0H1.325C.593 0 0 .593 0 1.325v21.351C0 23.407.593 24 1.325 24H12.82v-9.294H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12V24h6.116c.73 0 1.323-.593 1.323-1.325V1.325C24 .593 23.407 0 22.675 0z" fill="#4C545C" fill-rule="nonzero"/></svg> </div>
<div class="media-icon">
<svg width="24" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M24 2.557a9.83 9.83 0 01-2.828.775A4.932 4.932 0 0023.337.608a9.864 9.864 0 01-3.127 1.195A4.916 4.916 0 0016.616.248c-3.179 0-5.515 2.966-4.797 6.045A13.978 13.978 0 011.671 1.149a4.93 4.93 0 001.523 6.574 4.903 4.903 0 01-2.229-.616c-.054 2.281 1.581 4.415 3.949 4.89a4.935 4.935 0 01-2.224.084 4.928 4.928 0 004.6 3.419A9.9 9.9 0 010 17.54a13.94 13.94 0 007.548 2.212c9.142 0 14.307-7.721 13.995-14.646A10.025 10.025 0 0024 2.557z" fill="#4C545C" fill-rule="nonzero"/></svg> </div>
<div class="media-icon">
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z" fill="#4C545C" fill-rule="nonzero"/></svg>
</div>
</div>
</div>
</body>
</html>
我试图改变一些东西，这就是为什么我的 css 看起来不完整。
box-sizing CSS 属性 设置如何计算元素的总宽度和高度。
尝试将所有元素的 box-sizing 默认设置为 border-box，如下所示：
*{
box-sizing: border-box;
}
body{
width: 100vw!important;
}
这是一个完整的例子：
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: 'Bai Jamjuree', sans-serif;
min-width: 100vw;
width: 100vw!important;
max-width: 100vw;
}
h1{
color: #535a62;
}
p{
font-weight: 600;
color: #a6a7a9;
}
.header{
background: url("https://via.placeholder.com/1200");
background-size: cover;
height: 300px;
padding: 130px 0 0 0;
}
.logo{
margin: auto;
width: 125px;
height: 125px;
}
.title{
width: 690px;
height: 225px;
margin: auto;
margin-bottom: 100px;
}
.title-text h1{
text-align: center;
margin-bottom: 35px;
font-size: 2.75rem;
}
.title-text p{
text-align: center;
font-size: 1.25rem;
margin-bottom: 50px;
}
.title-buttons{
margin: auto;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 170px;
}
.download-ios button,
.download-mac button{
display: inline;
margin-right: 20px;
height: 50px;
width: 225px;
border-radius: 30px;
outline: none;
border: none;
font-size: 18px;
color: #fff;
padding: 10px 20px;
transition: 0.2s;
}
.download-ios button{
background-color: #26bba5;
border-bottom: 3px solid #18a08c;
}
.download-mac button{
background-color: #6174ff;
border-bottom: 3px solid #5362d7;
}
.computer-div{
margin-top: 500px;
position: relative;
}
.computer-image img{
display: inline;
margin-left: -30px;
width: 900px;
margin-bottom: 100px;
}
.all-searches-container{
position: absolute;
top: 50px;
right: 265px;
}
.search-div{
width: 350px;
}
.search-div h1{
margin-bottom: 15px;
}
.search-div p{
margin-bottom: 50px;
}
.title-img{
margin: auto;
display: flex;
justify-content: center;
align-items: center;
margin-top: 100px;
margin-bottom: 100px;
}
.sections{
position: relative;
display: inline;
margin-top: 200px;
margin-bottom: 200px;
}
.section{
display: inline;
width: 300px;
margin-right: 50px;
}
section h1,
.section p{
text-align: center;
width: 300px;
}
.section h1{
margin-bottom: 15px;
}
.section p{
margin-bottom: 20px;
}
.first h1,
.third h1{
padding-left: 40px;
}
.img-div{
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
/*.first{
position: absolute;
top: 50%;
left: -25%;
transform: translate(-25%, -50%);
}
.second{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.third{
position: absolute;
top: 50%;
left: 100%;
transform: translate(-25%, -50%);
}*/
.web-sites{
margin: auto;
margin-top: 1300px;
width: 100%;
padding-left: 200px;
margin-bottom: 150px;
}
.web-site{
display: inline-block;
width: 100px;
margin-right: 190px;
}
.download-ios :hover{
background-color: #5dccbb;
}
.download-mac :hover{
background-color: #8896ff;
}
.footer{
background-color: #f5f6f8;
padding: 25px 150px 20px 150px;
position: relative;
height: 100%;
}
.footer div,
.footer ul{
display: inline-block;
}
.logo-footer{
height: 100%;
width: 300px;
}
.logo-footer img{
width: 50px;
height: 50px;
}
ul{
list-style: none;
display: inline;
margin-top: 30px;
width: 200px;
}
li{
margin-right: 50px;
margin-bottom: 40px;
transition: 0.2s;
}
.social-media{
position: absolute;
right: 150px;
top: 100px;
}
ul :hover{
color: #33b295;
cursor: pointer;
}
.media-icon{
margin-right: 30px;
}
.media-icon svg :hover{
fill: #33b295;
}
@media screen and (max-width:600px){
.title, .computer-image img, .search-div{
width: 100%;
}
.section{
display: block;
top: 50%;
}
}
<!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">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@400;600&display=swap" rel="stylesheet">
<title>Clipboard</title>
</head>
<body>
<div class="header">
<div class="logo">
<img src="images/logo.svg" alt="">
</div>
</div>
<div class="main">
<div class="title">
<div class="title-text">
<h1>A history of everything you copy</h1>
<p>Clipboard allows you to track and organize everything you copy.
Instantly acces your clipboard on all your devices.
</p>
</div>
<div class="title-buttons">
<div class="download-ios">
<button>Download for iOS</button>
</div>
<div class="download-mac">
<button>Download for Mac</button>
</div>
</div>
<div class="title-text">
<h1>Keep track of your snippets</h1>
<p>Clipboard instantly stores any item you copy in the cloud,
meaning you can acces your snippets immediatly on all your devices.
Our Mac and iOS apps will help you organize everything.
</p>
</div>
</div>
<div class="computer-div">
<div class="computer-image">
<img src="images/image-computer.png" alt="">
</div>
<div class="all-searches-container">
<div class="search-div">
<h1>Quick Search</h1>
<p>Easily search your snippets by content,
category, web address, application, and more.
</p>
</div>
<div class="search-div">
<h1>iCLoud Sync</h1>
<p>Instantly saves and syncs snippets across all your devices.</p>
</div>
<div class="search-div">
<h1>Complete History</h1>
<p>Retrive any snippets from the first moment you started using app.</p>
</div>
</div>
<div class="title">
<div class="title-text">
<h1>Acces clipboard anywhere</h1>
<p>Whether you're on the go, or at your computer,
you can acces all your Clipboard snippets in a
few simple clicks.
</p>
</div>
<div class="title-img">
<img src="images/image-devices.png" alt="">
</div>
<div class="title-text">
<h1>Supercharge your workflow</h1>
<p>We've got tools to boost your productivity.</p>
</div>
<div class="sections">
<div class="section first">
<img src="images/icon-blacklist.svg" alt="">
<h1>Create blacklists</h1>
<p>Ensure sensitivite information never
makes its way to your clipboard by excluding
certain sources.
</p>
</div>
<div class="section second">
<img src="images//icon-text.svg" alt="">
<h1>Plain text snippets</h1>
<p>Remove unwanted formatting from copied
text for a consistent look.
</p>
</div>
<div class="section third">
<img src="images/icon-preview.svg" alt="">
<h1>Sneak preview</h1>
<p>Quick preview of all snippets on your Clipboard
for easy acces.
</p>
</div>
</div>
</div>
<div class="web-sites">
<div class="web-site">
<img src="images/logo-google.png" alt="">
</div>
<div class="web-site">
<img src="images/logo-ibm.png" alt="">
</div>
<div class="web-site">
<img src="images/logo-microsoft.png" alt="">
</div>
<div class="web-site">
<img src="images/logo-hp.png" alt="">
</div>
<div class="web-site">
<img src="images/logo-vector-graphics.png" alt="">
</div>
</div>
</div>
<div class="title">
<div class="title-text">
<h1>Clipboard for iOS and Mac OS</h1>
<p>Avaible for free on App Store. Download for Mac or iOS, sync
with iCloud and you're ready to start adding to your clipboard.
</p>
</div>
<div class="title-buttons">
<div class="download-ios"><button>Download for iOS</button></div>
<div class="download-mac"><button>Download for Mac</button></div>
</div>
</div>
</div>
<div class="footer">
<div class="logo-footer">
<img src="images/logo.svg" alt="">
</div>
<ul>
<li>FAQs</li>
<li>Contact Us</li>
</ul>
<ul>
<li>Privacy Policy</li>
<li>Press Kit</li>
</ul>
<ul>
<li>Install Guide</li>
</ul>
<div class="social-media">
<div class="media-icon">
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M22.675 0H1.325C.593 0 0 .593 0 1.325v21.351C0 23.407.593 24 1.325 24H12.82v-9.294H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12V24h6.116c.73 0 1.323-.593 1.323-1.325V1.325C24 .593 23.407 0 22.675 0z" fill="#4C545C" fill-rule="nonzero"/></svg> </div>
<div class="media-icon">
<svg width="24" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M24 2.557a9.83 9.83 0 01-2.828.775A4.932 4.932 0 0023.337.608a9.864 9.864 0 01-3.127 1.195A4.916 4.916 0 0016.616.248c-3.179 0-5.515 2.966-4.797 6.045A13.978 13.978 0 011.671 1.149a4.93 4.93 0 001.523 6.574 4.903 4.903 0 01-2.229-.616c-.054 2.281 1.581 4.415 3.949 4.89a4.935 4.935 0 01-2.224.084 4.928 4.928 0 004.6 3.419A9.9 9.9 0 010 17.54a13.94 13.94 0 007.548 2.212c9.142 0 14.307-7.721 13.995-14.646A10.025 10.025 0 0024 2.557z" fill="#4C545C" fill-rule="nonzero"/></svg> </div>
<div class="media-icon">
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z" fill="#4C545C" fill-rule="nonzero"/></svg>
</div>
</div>
</div>
</body>
</html>
当我在移动设备上使用我的网站时，容器的宽度没有覆盖主体的 100%。我将宽度设置为 100%，我试图将 min-width 放在 body 上，但屏幕右侧有白线。我也尝试过更改视口宽度，但那不起作用。
*{
margin: 0;
padding: 0;
}
body{
font-family: 'Bai Jamjuree', sans-serif;
overflow-x: hidden;
min-width: 1050px;
}
h1{
color: #535a62;
}
p{
font-weight: 600;
color: #a6a7a9;
}
.header{
background: url("https://via.placeholder.com/1200");
background-size: cover;
height: 300px;
padding: 130px 0 0 0;
}
.logo{
margin: auto;
width: 125px;
height: 125px;
}
.title{
width: 690px;
height: 225px;
margin: auto;
margin-bottom: 100px;
}
.title-text h1{
text-align: center;
margin-bottom: 35px;
font-size: 2.75rem;
}
.title-text p{
text-align: center;
font-size: 1.25rem;
margin-bottom: 50px;
}
.title-buttons{
margin: auto;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 170px;
}
.download-ios button,
.download-mac button{
display: inline;
margin-right: 20px;
height: 50px;
width: 225px;
border-radius: 30px;
outline: none;
border: none;
font-size: 18px;
color: #fff;
padding: 10px 20px;
transition: 0.2s;
}
.download-ios button{
background-color: #26bba5;
border-bottom: 3px solid #18a08c;
}
.download-mac button{
background-color: #6174ff;
border-bottom: 3px solid #5362d7;
}
.computer-div{
margin-top: 500px;
position: relative;
}
.computer-image img{
display: inline;
margin-left: -30px;
width: 900px;
margin-bottom: 100px;
}
.all-searches-container{
position: absolute;
top: 50px;
right: 265px;
}
.search-div{
width: 350px;
}
.search-div h1{
margin-bottom: 15px;
}
.search-div p{
margin-bottom: 50px;
}
.title-img{
margin: auto;
display: flex;
justify-content: center;
align-items: center;
margin-top: 100px;
margin-bottom: 100px;
}
.sections{
position: relative;
display: inline;
margin-top: 200px;
margin-bottom: 200px;
}
.section{
display: inline;
width: 300px;
margin-right: 50px;
}
section h1,
.section p{
text-align: center;
width: 300px;
}
.section h1{
margin-bottom: 15px;
}
.section p{
margin-bottom: 20px;
}
.first h1,
.third h1{
padding-left: 40px;
}
.img-div{
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
/*.first{
position: absolute;
top: 50%;
left: -25%;
transform: translate(-25%, -50%);
}
.second{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.third{
position: absolute;
top: 50%;
left: 100%;
transform: translate(-25%, -50%);
}*/
.web-sites{
margin: auto;
margin-top: 1300px;
width: 100%;
padding-left: 200px;
margin-bottom: 150px;
}
.web-site{
display: inline-block;
width: 100px;
margin-right: 190px;
}
.download-ios :hover{
background-color: #5dccbb;
}
.download-mac :hover{
background-color: #8896ff;
}
.footer{
background-color: #f5f6f8;
padding: 25px 150px 20px 150px;
position: relative;
height: 100%;
}
.footer div,
.footer ul{
display: inline-block;
}
.logo-footer{
height: 100%;
width: 300px;
}
.logo-footer img{
width: 50px;
height: 50px;
}
ul{
list-style: none;
display: inline;
margin-top: 30px;
width: 200px;
}
li{
margin-right: 50px;
margin-bottom: 40px;
transition: 0.2s;
}
.social-media{
position: absolute;
right: 150px;
top: 100px;
}
ul :hover{
color: #33b295;
cursor: pointer;
}
.media-icon{
margin-right: 30px;
}
.media-icon svg :hover{
fill: #33b295;
}
@media screen and (max-width:600px){
.title, .computer-image img, .search-div{
width: 100%;
}
.section{
display: block;
top: 50%;
}
}
<!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">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@400;600&display=swap" rel="stylesheet">
<title>Clipboard</title>
</head>
<body>
<div class="header">
<div class="logo">
<img src="images/logo.svg" alt="">
</div>
</div>
<div class="main">
<div class="title">
<div class="title-text">
<h1>A history of everything you copy</h1>
<p>Clipboard allows you to track and organize everything you copy.
Instantly acces your clipboard on all your devices.
</p>
</div>
<div class="title-buttons">
<div class="download-ios">
<button>Download for iOS</button>
</div>
<div class="download-mac">
<button>Download for Mac</button>
</div>
</div>
<div class="title-text">
<h1>Keep track of your snippets</h1>
<p>Clipboard instantly stores any item you copy in the cloud,
meaning you can acces your snippets immediatly on all your devices.
Our Mac and iOS apps will help you organize everything.
</p>
</div>
</div>
<div class="computer-div">
<div class="computer-image">
<img src="images/image-computer.png" alt="">
</div>
<div class="all-searches-container">
<div class="search-div">
<h1>Quick Search</h1>
<p>Easily search your snippets by content,
category, web address, application, and more.
</p>
</div>
<div class="search-div">
<h1>iCLoud Sync</h1>
<p>Instantly saves and syncs snippets across all your devices.</p>
</div>
<div class="search-div">
<h1>Complete History</h1>
<p>Retrive any snippets from the first moment you started using app.</p>
</div>
</div>
<div class="title">
<div class="title-text">
<h1>Acces clipboard anywhere</h1>
<p>Whether you're on the go, or at your computer,
you can acces all your Clipboard snippets in a
few simple clicks.
</p>
</div>
<div class="title-img">
<img src="images/image-devices.png" alt="">
</div>
<div class="title-text">
<h1>Supercharge your workflow</h1>
<p>We've got tools to boost your productivity.</p>
</div>
<div class="sections">
<div class="section first">
<img src="images/icon-blacklist.svg" alt="">
<h1>Create blacklists</h1>
<p>Ensure sensitivite information never
makes its way to your clipboard by excluding
certain sources.
</p>
</div>
<div class="section second">
<img src="images//icon-text.svg" alt="">
<h1>Plain text snippets</h1>
<p>Remove unwanted formatting from copied
text for a consistent look.
</p>
</div>
<div class="section third">
<img src="images/icon-preview.svg" alt="">
<h1>Sneak preview</h1>
<p>Quick preview of all snippets on your Clipboard
for easy acces.
</p>
</div>
</div>
</div>
<div class="web-sites">
<div class="web-site">
<img src="images/logo-google.png" alt="">
</div>
<div class="web-site">
<img src="images/logo-ibm.png" alt="">
</div>
<div class="web-site">
<img src="images/logo-microsoft.png" alt="">
</div>
<div class="web-site">
<img src="images/logo-hp.png" alt="">
</div>
<div class="web-site">
<img src="images/logo-vector-graphics.png" alt="">
</div>
</div>
</div>
<div class="title">
<div class="title-text">
<h1>Clipboard for iOS and Mac OS</h1>
<p>Avaible for free on App Store. Download for Mac or iOS, sync
with iCloud and you're ready to start adding to your clipboard.
</p>
</div>
<div class="title-buttons">
<div class="download-ios"><button>Download for iOS</button></div>
<div class="download-mac"><button>Download for Mac</button></div>
</div>
</div>
</div>
<div class="footer">
<div class="logo-footer">
<img src="images/logo.svg" alt="">
</div>
<ul>
<li>FAQs</li>
<li>Contact Us</li>
</ul>
<ul>
<li>Privacy Policy</li>
<li>Press Kit</li>
</ul>
<ul>
<li>Install Guide</li>
</ul>
<div class="social-media">
<div class="media-icon">
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M22.675 0H1.325C.593 0 0 .593 0 1.325v21.351C0 23.407.593 24 1.325 24H12.82v-9.294H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12V24h6.116c.73 0 1.323-.593 1.323-1.325V1.325C24 .593 23.407 0 22.675 0z" fill="#4C545C" fill-rule="nonzero"/></svg> </div>
<div class="media-icon">
<svg width="24" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M24 2.557a9.83 9.83 0 01-2.828.775A4.932 4.932 0 0023.337.608a9.864 9.864 0 01-3.127 1.195A4.916 4.916 0 0016.616.248c-3.179 0-5.515 2.966-4.797 6.045A13.978 13.978 0 011.671 1.149a4.93 4.93 0 001.523 6.574 4.903 4.903 0 01-2.229-.616c-.054 2.281 1.581 4.415 3.949 4.89a4.935 4.935 0 01-2.224.084 4.928 4.928 0 004.6 3.419A9.9 9.9 0 010 17.54a13.94 13.94 0 007.548 2.212c9.142 0 14.307-7.721 13.995-14.646A10.025 10.025 0 0024 2.557z" fill="#4C545C" fill-rule="nonzero"/></svg> </div>
<div class="media-icon">
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z" fill="#4C545C" fill-rule="nonzero"/></svg>
</div>
</div>
</div>
</body>
</html>
我试图改变一些东西，这就是为什么我的 css 看起来不完整。
box-sizing CSS 属性 设置如何计算元素的总宽度和高度。
尝试将所有元素的 box-sizing 默认设置为 border-box，如下所示：
*{
box-sizing: border-box;
}
body{
width: 100vw!important;
}
这是一个完整的例子：
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: 'Bai Jamjuree', sans-serif;
min-width: 100vw;
width: 100vw!important;
max-width: 100vw;
}
h1{
color: #535a62;
}
p{
font-weight: 600;
color: #a6a7a9;
}
.header{
background: url("https://via.placeholder.com/1200");
background-size: cover;
height: 300px;
padding: 130px 0 0 0;
}
.logo{
margin: auto;
width: 125px;
height: 125px;
}
.title{
width: 690px;
height: 225px;
margin: auto;
margin-bottom: 100px;
}
.title-text h1{
text-align: center;
margin-bottom: 35px;
font-size: 2.75rem;
}
.title-text p{
text-align: center;
font-size: 1.25rem;
margin-bottom: 50px;
}
.title-buttons{
margin: auto;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 170px;
}
.download-ios button,
.download-mac button{
display: inline;
margin-right: 20px;
height: 50px;
width: 225px;
border-radius: 30px;
outline: none;
border: none;
font-size: 18px;
color: #fff;
padding: 10px 20px;
transition: 0.2s;
}
.download-ios button{
background-color: #26bba5;
border-bottom: 3px solid #18a08c;
}
.download-mac button{
background-color: #6174ff;
border-bottom: 3px solid #5362d7;
}
.computer-div{
margin-top: 500px;
position: relative;
}
.computer-image img{
display: inline;
margin-left: -30px;
width: 900px;
margin-bottom: 100px;
}
.all-searches-container{
position: absolute;
top: 50px;
right: 265px;
}
.search-div{
width: 350px;
}
.search-div h1{
margin-bottom: 15px;
}
.search-div p{
margin-bottom: 50px;
}
.title-img{
margin: auto;
display: flex;
justify-content: center;
align-items: center;
margin-top: 100px;
margin-bottom: 100px;
}
.sections{
position: relative;
display: inline;
margin-top: 200px;
margin-bottom: 200px;
}
.section{
display: inline;
width: 300px;
margin-right: 50px;
}
section h1,
.section p{
text-align: center;
width: 300px;
}
.section h1{
margin-bottom: 15px;
}
.section p{
margin-bottom: 20px;
}
.first h1,
.third h1{
padding-left: 40px;
}
.img-div{
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
/*.first{
position: absolute;
top: 50%;
left: -25%;
transform: translate(-25%, -50%);
}
.second{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.third{
position: absolute;
top: 50%;
left: 100%;
transform: translate(-25%, -50%);
}*/
.web-sites{
margin: auto;
margin-top: 1300px;
width: 100%;
padding-left: 200px;
margin-bottom: 150px;
}
.web-site{
display: inline-block;
width: 100px;
margin-right: 190px;
}
.download-ios :hover{
background-color: #5dccbb;
}
.download-mac :hover{
background-color: #8896ff;
}
.footer{
background-color: #f5f6f8;
padding: 25px 150px 20px 150px;
position: relative;
height: 100%;
}
.footer div,
.footer ul{
display: inline-block;
}
.logo-footer{
height: 100%;
width: 300px;
}
.logo-footer img{
width: 50px;
height: 50px;
}
ul{
list-style: none;
display: inline;
margin-top: 30px;
width: 200px;
}
li{
margin-right: 50px;
margin-bottom: 40px;
transition: 0.2s;
}
.social-media{
position: absolute;
right: 150px;
top: 100px;
}
ul :hover{
color: #33b295;
cursor: pointer;
}
.media-icon{
margin-right: 30px;
}
.media-icon svg :hover{
fill: #33b295;
}
@media screen and (max-width:600px){
.title, .computer-image img, .search-div{
width: 100%;
}
.section{
display: block;
top: 50%;
}
}
<!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">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@400;600&display=swap" rel="stylesheet">
<title>Clipboard</title>
</head>
<body>
<div class="header">
<div class="logo">
<img src="images/logo.svg" alt="">
</div>
</div>
<div class="main">
<div class="title">
<div class="title-text">
<h1>A history of everything you copy</h1>
<p>Clipboard allows you to track and organize everything you copy.
Instantly acces your clipboard on all your devices.
</p>
</div>
<div class="title-buttons">
<div class="download-ios">
<button>Download for iOS</button>
</div>
<div class="download-mac">
<button>Download for Mac</button>
</div>
</div>
<div class="title-text">
<h1>Keep track of your snippets</h1>
<p>Clipboard instantly stores any item you copy in the cloud,
meaning you can acces your snippets immediatly on all your devices.
Our Mac and iOS apps will help you organize everything.
</p>
</div>
</div>
<div class="computer-div">
<div class="computer-image">
<img src="images/image-computer.png" alt="">
</div>
<div class="all-searches-container">
<div class="search-div">
<h1>Quick Search</h1>
<p>Easily search your snippets by content,
category, web address, application, and more.
</p>
</div>
<div class="search-div">
<h1>iCLoud Sync</h1>
<p>Instantly saves and syncs snippets across all your devices.</p>
</div>
<div class="search-div">
<h1>Complete History</h1>
<p>Retrive any snippets from the first moment you started using app.</p>
</div>
</div>
<div class="title">
<div class="title-text">
<h1>Acces clipboard anywhere</h1>
<p>Whether you're on the go, or at your computer,
you can acces all your Clipboard snippets in a
few simple clicks.
</p>
</div>
<div class="title-img">
<img src="images/image-devices.png" alt="">
</div>
<div class="title-text">
<h1>Supercharge your workflow</h1>
<p>We've got tools to boost your productivity.</p>
</div>
<div class="sections">
<div class="section first">
<img src="images/icon-blacklist.svg" alt="">
<h1>Create blacklists</h1>
<p>Ensure sensitivite information never
makes its way to your clipboard by excluding
certain sources.
</p>
</div>
<div class="section second">
<img src="images//icon-text.svg" alt="">
<h1>Plain text snippets</h1>
<p>Remove unwanted formatting from copied
text for a consistent look.
</p>
</div>
<div class="section third">
<img src="images/icon-preview.svg" alt="">
<h1>Sneak preview</h1>
<p>Quick preview of all snippets on your Clipboard
for easy acces.
</p>
</div>
</div>
</div>
<div class="web-sites">
<div class="web-site">
<img src="images/logo-google.png" alt="">
</div>
<div class="web-site">
<img src="images/logo-ibm.png" alt="">
</div>
<div class="web-site">
<img src="images/logo-microsoft.png" alt="">
</div>
<div class="web-site">
<img src="images/logo-hp.png" alt="">
</div>
<div class="web-site">
<img src="images/logo-vector-graphics.png" alt="">
</div>
</div>
</div>
<div class="title">
<div class="title-text">
<h1>Clipboard for iOS and Mac OS</h1>
<p>Avaible for free on App Store. Download for Mac or iOS, sync
with iCloud and you're ready to start adding to your clipboard.
</p>
</div>
<div class="title-buttons">
<div class="download-ios"><button>Download for iOS</button></div>
<div class="download-mac"><button>Download for Mac</button></div>
</div>
</div>
</div>
<div class="footer">
<div class="logo-footer">
<img src="images/logo.svg" alt="">
</div>
<ul>
<li>FAQs</li>
<li>Contact Us</li>
</ul>
<ul>
<li>Privacy Policy</li>
<li>Press Kit</li>
</ul>
<ul>
<li>Install Guide</li>
</ul>
<div class="social-media">
<div class="media-icon">
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M22.675 0H1.325C.593 0 0 .593 0 1.325v21.351C0 23.407.593 24 1.325 24H12.82v-9.294H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12V24h6.116c.73 0 1.323-.593 1.323-1.325V1.325C24 .593 23.407 0 22.675 0z" fill="#4C545C" fill-rule="nonzero"/></svg> </div>
<div class="media-icon">
<svg width="24" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M24 2.557a9.83 9.83 0 01-2.828.775A4.932 4.932 0 0023.337.608a9.864 9.864 0 01-3.127 1.195A4.916 4.916 0 0016.616.248c-3.179 0-5.515 2.966-4.797 6.045A13.978 13.978 0 011.671 1.149a4.93 4.93 0 001.523 6.574 4.903 4.903 0 01-2.229-.616c-.054 2.281 1.581 4.415 3.949 4.89a4.935 4.935 0 01-2.224.084 4.928 4.928 0 004.6 3.419A9.9 9.9 0 010 17.54a13.94 13.94 0 007.548 2.212c9.142 0 14.307-7.721 13.995-14.646A10.025 10.025 0 0024 2.557z" fill="#4C545C" fill-rule="nonzero"/></svg> </div>
<div class="media-icon">
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z" fill="#4C545C" fill-rule="nonzero"/></svg>
</div>
</div>
</div>
</body>
</html>