我正在尝试将所有内容对齐，使各部分对齐等等。但是我似乎无法让每个部分都排成一行。
以下是链接：https://codepen.io/pmurtagh4/pen/GXNzrJ
* {
box-sizing: border-box;
}
body {
background-color: white;
font-family: 'Open Sans', sans-serif;
color: #fff;
font-size: 14px;
line-height: 20px;
}
h1 {
margin: 10px 0px 24px;
font-family: 'Petit Formal Script', sans-serif;
color: #2d3338;
font-size: 69px;
line-height: 54px;
font-style: normal;
font-weight: 400;
letter-spacing: 0px;
text-shadow: none;
}
h2 {
margin: 0px 0px 10px;
font-size: 32px;
line-height: 36px;
font-weight: 400;
text-shadow: none;
}
p {
color: #05386B;
}
.button {
width: 35%;
height: 54px;
background-color: #1abc9c;
color: #fff;
font-size: 16px;
font-weight: 300;
margin-right: 30%;
margin-left: 10%;
margin-top: 10px;
}
.subtitle {
margin-right: 89px;
margin-bottom: 63px;
margin-left: 89px;
font-family: 'Times New Roman';
color: #74737a;
font-size: 25px;
line-height: 31px;
font-weight: 400;
}
.field {
width: 70%;
height: 54px;
padding-right: 20px;
padding-left: 20px;
display: block;
border: 0px solid #000;
font-size: 16px;
}
.sign-up-form {
display: inline-block;
width: 120%;
padding: 14px 28px;
font-size: 16px;
text-align: center;
}
.header-section {
height: 100%;
padding-top: 104px;
background-color: #5CDB95;
text-align: center;
}
.bars-wrapper {
background-color: #1abc9c;
}
.bar {
width: 14.285%;
height: 7px;
float: left;
background-color: #1abc9c;
}
.bar._2 {
background-color: #f2ca27;
}
.bar._3 {
background-color: #e67e22;
}
.bar._4 {
background-color: #16a085;
}
.bar._5 {
background-color: #2980b9;
}
.bar._6 {
background-color: #e74c3c;
}
/*will be using this to hide parts of image
.image-crop {
overflow: hidden;
height: 260px;
}
*/
.about-section {
padding: 80px 0 80px;
background-color: white;
margin: 50px;
}
.about-section h2 {
font-size: 40px;
font-weight: 800px;
color: #033048;
margin-bottom: 40px;
}
.about-book p {
font-size: 22px;
font-weight: 600px;
}
.aboutus {
background-color: pink;
margin: auto;
}
footer {
background-color: blue;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Raijin Studios</title>
</head>
<body>
<div class="bars-wrapper">
<div class="bar"></div>
<div class="bar _2"></div>
<div class="bar _3"></div>
<div class="bar _4"></div>
<div class="bar _5"></div>
<div class="bar _6"></div>
<div class="bar"></div>
</div>
<div class="header-section">
<h1 class="heading">Raijin Studios</h1>
<p class="subtitle">Raijin Studios is excited to announce our new upcoming novella, The Water King.</p>
<div class="sign-up-form">
<form name="sign-up"><input type="email" name="email" placeholder="Enter Your Email" max-length="256" reguired="" class="field"><input class="button" type="submit" value="Get Notified"></form>
<!--This is where an image of the new book will go -->
<section class="about-section">
<h2>About The Water King!</h2>
<p class="about-book">Beginning in a fictional realm, one heir to the worlds throne is casted to earth by his best friend - his brother, the one he trusted most. When losing his memory causes the mysterious man to forget who he his and where he came from, he turns
to the help of a strange girl who finds him and helps him remeber who he was and where he came from.</p> </section>
<section class="aboutus">
<p>This section will be about the fictionous company. Similar to the about pages on websites.</p>
</section <footer>
<p>This will be the footer, thanking our users and readers and will display social media icons and copyright.
<!--i will be added more features and elements to both the footer and the sections of the website. For intereactivity, I am going to try to make the color bar at the top fade in and out as well -->
</footer>
</body>
</html>
答案 0 :(得分：0)
设置margin: auto，删除display: block并将宽度设置为100％而不是120％，这看起来还不错。这是您要找的东西吗？
答案 1 :(得分：0)
您遇到的主要问题是由于.sign-up-form width的样式。当前设置为120%，这使内容变得很奇怪。删除它或将其更改为100%。
我发现的第二个问题与font-weight有关。它的值永远不会在px中。查看doc以获取更多信息。
第三期，删除页面上的默认边距。
更新的代码段-
* {
box-sizing: border-box;
margin: 0;
}
body {
background-color: white;
font-family: 'Open Sans', sans-serif;
color: #fff;
font-size: 14px;
line-height: 20px;
}
h1 {
margin: 10px 0px 24px;
font-family: 'Petit Formal Script', sans-serif;
color: #2d3338;
font-size: 69px;
line-height: 54px;
font-style: normal;
font-weight: 400;
letter-spacing: 0px;
text-shadow: none;
}
h2 {
margin: 0px 0px 10px;
font-size: 32px;
line-height: 36px;
font-weight: 400;
text-shadow: none;
}
p {
color: #05386B;
}
.button {
width: 50%;
height: 54px;
background-color: #1abc9c;
color: #fff;
font-size: 16px;
font-weight: 300;
margin: 5%;
}
.subtitle {
margin-right: 89px;
margin-bottom: 63px;
margin-left: 89px;
font-family: 'Times New Roman';
color: #74737a;
font-size: 25px;
line-height: 31px;
font-weight: 400;
}
.field {
width: 100%;
height: 54px;
padding-right: 20px;
padding-left: 20px;
display: block;
border: 0px solid #000;
font-size: 16px;
}
.sign-up-form {
display: inline-block;
width: 100%;
padding: 14px 28px;
font-size: 16px;
text-align: center;
}
.header-section {
height: 100%;
padding-top: 104px;
background-color: #5CDB95;
text-align: center;
}
.bars-wrapper {
background-color: #1abc9c;
}
.bar {
width: 14.285%;
height: 7px;
float: left;
background-color: #1abc9c;
}
.bar._2 {
background-color: #f2ca27;
}
.bar._3 {
background-color: #e67e22;
}
.bar._4 {
background-color: #16a085;
}
.bar._5 {
background-color: #2980b9;
}
.bar._6 {
background-color: #e74c3c;
}
/*will be using this to hide parts of image
.image-crop {
overflow: hidden;
height: 260px;
}
*/
.about-section {
padding: 80px 0 80px;
background-color: white;
margin: 50px 0px 50px;
}
.about-section h2 {
font-size: 40px;
font-weight: 800;
color: #033048;
margin-bottom: 40px;
}
.about-book p {
font-size: 22px;
font-weight: 600;
}
.aboutus {
background-color: pink;
margin: auto;
}
footer {
background-color: blue;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Raijin Studios</title>
</head>
<body>
<div class="bars-wrapper">
<div class="bar"></div>
<div class="bar _2"></div>
<div class="bar _3"></div>
<div class="bar _4"></div>
<div class="bar _5"></div>
<div class="bar _6"></div>
<div class="bar"></div>
</div>
<div class="header-section">
<h1 class="heading">Raijin Studios</h1>
<p class="subtitle">Raijin Studios is excited to announce our new upcoming novella, The Water King.</p>
<div class="sign-up-form">
<form name="sign-up"><input type="email" name="email" placeholder="Enter Your Email" max-length="256" reguired="" class="field"><input class="button" type="submit" value="Get Notified"></form>
<!--This is where an image of the new book will go -->
<section class="about-section">
<h2>About The Water King!</h2>
<p class="about-book">Beginning in a fictional realm, one heir to the worlds throne is casted to earth by his best friend - his brother, the one he trusted most. When losing his memory causes the mysterious man to forget who he his and where he came from, he turns
to the help of a strange girl who finds him and helps him remeber who he was and where he came from.</p> </section>
<section class="aboutus">
<p>This section will be about the fictionous company. Similar to the about pages on websites.</p>
</section>
<footer>
<p>This will be the footer, thanking our users and readers and will display social media icons and copyright.</p>
<!--i will be added more features and elements to both the footer and the sections of the website. For intereactivity, I am going to try to make the color bar at the top fade in and out as well -->
</footer>
</body>
</html>
P.S。您的许多标签都没有结束标签。您也应该修复它们。