这是我试图复制它的原始图像 这是我迄今为止所做的 问题是如何将所有内容对齐到原始图片中的垂直直线。
如果您比较我所做的内容，您可以看到导航栏和其他内容到处都是。拜托，我需要我的内容与原始内容完全相同。这是我的网站的网站代码 HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
Softing-Software Landing Page WordPress Theme Preview - ThemeForest
</title>
<link rel="stylesheet" href="front.css" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<header>
<div class="container">
<div class="image">
<div class="image1">
<img src="logo-1.png" width="150px" height="50px" />
</div>
</div>
<div>
<nav style="display: flex">
<ul class="header-text">
<li><button class="btn-1">HOME</button></li>
<li><button class="btn-1">SERVICES</button></li>
<li><button class="btn-1">ABOUT</button></li>
<li><button class="btn-1">PRICING</button></li>
<li><button class="btn-1">TEAM</button></li>
<li><button class="btn-1">PAGES</button></li>
<li><button class="btn-1">CONTACT</button></li>
</ul>
<button
style="
border: none;
border-radius: 20px;
padding: 10px 20px;
background-color: aqua;
color: aliceblue;
font-family: sans-serif;
"
>
LOGIN
</button>
</nav>
</div>
</div>
</header>
<div class="section1">
<div class="sub-section1">
<h1>We're Building <span style="color: #4ac4f3">Software</span></h1>
<h1 style="margin-bottom: 20px">For You</h1>
<p style="margin-bottom: 30px">
Celebrated delightful an especially increasing instrument am.
Indulgence<br />contrasted sufficient to unpleasant in in insensible
favourable. Latter<br />
remark hunted vulgar say man.sitting hearted on it without me.
</p>
<div class="sub-section2">
<button
style="
width: 180px;
border-radius: 20px;
border: 2px solid #4ac4f3;
height: 47px;
margin-top: 10px;
background-color: #edf5ff;
color: #4ac4f3;
font-weight: 900;
font-family: Poppins, sans-serif;
"
>
GET STARTED
</button>
<img
style="height: 60px; margin-left: 20px"
src="circle-play-solid.svg"
/>
</div>
</div>
<div class="sub-section3">
<img style="height: 500px; width: 500px" src="app-4.png" />
</div>
</div>
<div class="section2">
<div class="super-section">
<div class="sub-section4">
<h4>STORY ABOUT US</h4>
<h2>
Create your app page <br />
with expert developer
</h2>
<p>
Both rest of know draw fond post as. It agreement defective to
excellent.<br />
Feebly do engage of narrow. Extensive repulsive belonging depending
if promotion be zealously as.<br />
Preference inquietude ask now are dispatched led appearance. Small
meant in so doubt<br />
hopes.
</p>
<button class="btn-2">READ MORE</button>
<hr />
</div>
<div class="sub-section5">
<h3>Why Choose Us</h3>
<div class="heading1">
<img class="circle1" src="circle-check-solid.svg" />
<span class="note">Elderly Is Detract Tedious Assured Private</span>
</div>
<div class="heading1">
<img class="circle1" src="circle-check-solid.svg" />
<span class="note">Do Travelling Companions Contrasted</span>
</div>
<div class="heading1">
<img class="circle1" src="circle-check-solid.svg" />
<span class="note">Mistress Strongly Remember Up</span>
</div>
<div class="heading1">
<img class="circle1" src="circle-check-solid.svg" />
<span class="note">Branched Is On An Ecstatic Directly It</span>
</div>
</div>
</div>
<div class="sub-section6">
<div style="color: white;" class="grid">
<img class="icon" src="ticket-solid.svg">
<span class="sub-heading">Ticket Manage</span>
<p class="para">
Downs those still witty<br />
an balls so chief so. Moment an little<br />
remain no lively
</p>
</div>
<div style="background-color: white;" class="grid">
<img class="icon" src="comments-regular.svg">
<span class="sub-heading">Live Messaging</span>
<p class="para">
Downs those still witty<br />
an balls so chief so. Moment an little<br />
remain no lively
</p>
</div>
<div style="background-color: white;" class="grid">
<img class="icon" src="envelope-open-text-solid.svg">
<span class="sub-heading">Email Workflow</span>
<p class="para">
Downs those still witty<br />
an balls so chief so. Moment an little<br />
remain no lively
</p>
</div>
<div style="color: white;" class="grid">
<img class="icon" src="file-arrow-up-solid.svg">
<span class="sub-heading">File Upload</span>
<p class="para">
Downs those still witty<br />
an balls so chief so. Moment an little<br />
remain no lively
</p>
</div>
</div>
</div>
<div class="section3">
<div class="sub-section7">
<span class="company">Trusted By The World's Best<br> Companies</span>
<p class="para1">Seeing rather her you not esteem men settle genius<br> excuse. Deal say over you age from. Comparison new<br> ham melancholy son themselves.</p>
</div>
<div class="sub-section8">
<img src="cupid love.png">
<img src="zayaka.png">
<img src="car.png">
</div>
</div>
<footer>
<div class="section4">
<div class="sub-section9">
<img class="copyright" src="copyright-solid.svg">
<p> Copyright 2019. All Rights Reserved By <span style="color: #4ac4f3;">Ninetheme</span></p>
</div>
<div class="sub-section10">
<span> TERMS OF USER | LICENSE | SUPPORT</span>
</div>
</div>
</footer>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
/* box-sizing: border-box; */
height: auto;
display: flex;
flex-direction: column;
align-items: center;
}
.container {
display: flex;
justify-content: center;
background-color: white;
/* padding: 40px; */
height: 100px;
flex-direction: row;
position: fixed;
top: 0;
right: 0;
left: 0;
align-items: center;
}
.header-text {
width: 600px;
background-color: white;
justify-content: space-around;
align-items: center;
margin-left: 400px;
list-style: none;
display: flex;
}
.header-text span {
margin-right: 40px;
font-family: sans-serif;
font-weight: 400;
}
.btn-1 {
border: none;
background-color: white;
}
.image1 {
margin-left: 30px;
height: 100%;
background-color: white;
}
.section1 {
background-color: #edf5ff;
background-image: url("waves-shape.svg");
width: 100vw;
height: 600px;
margin-top: 100px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.sub-section1 {
display: flex;
flex-direction: column;
}
.sub-section2 {
display: flex;
flex-direction: row;
}
h1 {
font-family: "Poppins", sans-serif;
}
p {
font-family: "Open Sans", sans-serif;
}
.section2 {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
width: 80%;
}
.sub-section4 {
display: flex;
flex-direction: column;
width: 100%;
}
.super-section {
margin-right: 50px;
}
h4 {
font-family: "Poppins", sans-serif;
color: #4ac4f3;
}
h2 {
font-family: "Poppins", sans-serif;
}
.btn-2 {
height: 50px;
width: 190px;
border-radius: 30px;
border: none;
background-color: #4ac4f3;
color: white;
font-weight: 700;
letter-spacing: 1px;
}
hr {
width: 100%;
}
.sub-section5 {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
margin-top: 35px;
}
.heading1 {
display: flex;
flex-direction: row;
gap: 10px;
}
.circle1 {
height: 20px;
}
.note {
color: #666;
display: block;
font-family: "Poppins", sans-serif;
font-weight: 400;
letter-spacing: 1px;
}
h3 {
font-size: 24px;
font-family: "Poppins", sans-serif;
}
.sub-section6 {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 35%;
flex-wrap: wrap;
margin-top: 90px;
}
.grid {
width: 45%;
background-color: #4ac4f3;
border: none;
margin-bottom: 25px;
padding: 32px;
display: flex;
flex-direction: column;
gap: 15px;
box-shadow: 1px 1px 5px black;
}
.icon {
width: 40%;
height: 30%;
}
.sub-heading {
font-family: "Poppins", sans-serif;
font-weight: bold;
}
.para {
font-family: "Open Sans", sans-serif;
}
.section3 {
background-color: #edf5ff;
display: flex;
justify-content: center;
align-items: center;
height: 300px;
width: 80%;
}
.sub-section7 {
display: flex;
flex-direction: column;
}
.company {
margin-top: 50px;
font-family: "Poppins", sans-serif;
font-weight: bolder;
font-size: large;
}
.para1 {
font-family: "Open Sans", sans-serif;
color: #232323;
line-height: 26px;
margin: 0 0 15px;
font-weight: 400;
margin-top: 10px;
}
.section4 {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
height: 125px;
}
.sub-section9 {
display: flex;
flex-direction: row;
font-weight: 400;
font-family: "Open Sans", sans-serif;
}
.copyright {
width: 15px;
margin-right: 5px;
}
.sub-section10 {
color: #999;
display: inline-block;
font-weight: 400;
margin-left: 10px;
text-transform: uppercase;
font-family: "Poppins", sans-serif;
}
将
width: 100%margin: 0 20%20%rightleft应用此更改将解决您的问题，但请记住删除
absolutetop您的问题仍然没有解决，请对此答案添加评论，谢谢。