再次，所以对我来说，这是新的一天，有了新的问题。我的问题是，我希望每个部分都有一个不同的全宽背景颜色和固定的内容。我完全被卡住了。如果我放了一个宽度，那么我的背景会缩短到宽度，但我的内容是固定的。如果我不放一个固定的宽度，我的背景很好，但我的内容看起来很糟糕。任何帮助都将是巨大的帮助。
附言：今天是我在html和css上的第一个完整月，所以如果你发现任何错误，请批评我的代码。我想提高，所以感谢所有的帮助。
body,html{
margin: 0;
padding: 0;
background-color: yellow;
height: 100%;
}
img{
max-width: 100%;
}
/*******
Nav Bar
*******/
header{
background-image:url(https://sunsetstation.sclv.com/~/media/Images/Page-Background-Images/Sunset/SS_Dining_VivaSalsa2.jpg?h=630&la=en&w=1080);
margin: 0;
height:100%;
margin-bottom: 85px;
background-size: cover;
background-repeat: no-repeat;
}
.header-title{
float:left;
text-decoration: none;
color: green;
font-size: 60px;
font-family: 'Monoton', cursive;
font-weight: bolder;
}
#nav-bar{
float: right;
margin: 0;
}
#nav-bar li{
text-decoration: none;
float: left;
list-style-type: none;
}
.nav-link{
float: left;
text-decoration: none;
text-transform: uppercase;
padding: 25px 0;
width: 140px;
transition: .25s color linear,.5s background-color linear;
text-align: center;
color: green;
font-weight: bolder;
}
/*******
About
*******/
#wrapper{
width: 1200px;
margin: 25px auto;
}
.our-story figure{
float: left;
width: 50%;
margin-top: 8px;
}
.our-story h1{
margin:18px auto;
font-family: 'Pacifico', cursive;
font-size: 4em;
color: green;
}
.our-story p{
line-height: 2.5em;
margin: 0;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: bolder;
}
/*************
Our Specials
*************/
#wrapper-two{
background-color: #b2ff00;
}
#wrapper-two h1{
text-align: center;
font-size: 4em;
font-family: 'Pacifico', cursive;
}
.specials{
width: 25%;
margin:0 auto;
float: left;
}
/*************
pseudo classes
**************/
.header-title:hover,
.header-title:focus{
transform: rotate(360deg);
transition: 1s all linear;
}
.nav-link:hover,
.nav-link:active,
.nav-link:focus{
background-color: lightgreen;
color: white;
}
.our-story figure:hover{
transform: scale(1.15);
}
/**********
Clearfix
**********/
.clearfix:after,
.clearfix:before {
content:" ";
display:table;
clear:both;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="tiempo de taco.css">
<title>Tiempo De taco</title>
</head>
<body>
<header class="clearfix">
<nav>
<h1><a href="#" class="header-title">Tiempo De Taco</a></h1>
<ul id="nav-bar">
<li><a href="#" class="nav-link">Home</a></li>
<li><a href="#our-story" class="nav-link">Our Story</a></li>
<li><a href="#our-specials" class="nav-link">Our Specials</a></li>
<li><a href="" class="nav-link">Gallery</a></li>
</ul>
</nav>
</header>
<section class="clearfix">
<div id="wrapper">
<a id="our-story"></a>
<div class="our-story">
<figure>
<img src="http://www.vancouversun.com/life/cms/binary/7961377.jpg?size=sw620x65">
</figure>
<h1>Our Story</h1>
<p>Mexican cuisine is highly tied to the culture, social structure and its popular traditions, the most important example of which is the use of mole for special occasions and holidays. For this reason and others, Mexican cuisine was added by UNESCO to its list of the world’s "intangible cultural heritage".<br>
Thinking about our roots, we remember our beloved Guadalajara, Jalisco, located in the western-pacific area of Mexico. Guadalajara is the cultural center of Mexico, considered by most to be the home of Mariachi music and host to a number of large-scale cultural events such as the International Film Festival of Guadalajara and the Guadalajara International Book Fair and a number of globally renowned cultural events which draw international crowds.<br>
It is a city full of traditions and color. From there we bring some inspiration into your table. From chiles rellenos with cheese, full of flavorful salsas to delicious tortilla soups we try to give you a little bit of our mexican traditions.
</p>
</div>
</div>
</section>
<section>
<div id="wrapper-two" class="clearfix">
<a id="our-specials"></a>
<h1>Our Specials</h1>
<div class="specials">
<p>It is a city full of traditions and color. From there we bring some inspiration into your table. From chiles rellenos with cheese, full of flavorful salsas to delicious tortilla soups we try to give you a little bit of our mexican traditions.<p>
</div>
<div class="specials">
It is a city full of traditions and color. From there we bring some inspiration into your table. From chiles rellenos with cheese, full of flavorful salsas to delicious tortilla soups we try to give you a little bit of our mexican traditions.
</div>
</div>
</section>
</body>
</html>body,html{
margin: 0;
padding: 0;
background-color: yellow;
height: 100%;
}
img{
max-width: 100%;
}
/*******
Nav Bar
*******/
header{
background-image:url(https://sunsetstation.sclv.com/~/media/Images/Page-Background-Images/Sunset/SS_Dining_VivaSalsa2.jpg?h=630&la=en&w=1080);
margin: 0;
height:100%;
margin-bottom: 85px;
background-size: cover;
background-repeat: no-repeat;
}
.header-title{
float:left;
text-decoration: none;
color: green;
font-size: 60px;
font-family: 'Monoton', cursive;
font-weight: bolder;
}
#nav-bar{
float: right;
margin: 0;
}
#nav-bar li{
text-decoration: none;
float: left;
list-style-type: none;
}
.nav-link{
float: left;
text-decoration: none;
text-transform: uppercase;
padding: 25px 0;
width: 140px;
transition: .25s color linear,.5s background-color linear;
text-align: center;
color: green;
font-weight: bolder;
}
/*******
About
*******/
#wrapper{
width: 1200px;
margin: 25px auto;
}
.our-story figure{
float: left;
width: 50%;
margin-top: 8px;
}
.our-story h1{
margin:18px auto;
font-family: 'Pacifico', cursive;
font-size: 4em;
color: green;
}
.our-story p{
line-height: 2.5em;
margin: 0;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: bolder;
}
/*************
Our Specials
*************/
#wrapper-two{
background-color: #b2ff00;
}
#wrapper-two h1{
text-align: center;
font-size: 4em;
font-family: 'Pacifico', cursive;
}
/*************
pseudo classes
**************/
.header-title:hover,
.header-title:focus{
transform: rotate(360deg);
transition: 1s all linear;
}
.nav-link:hover,
.nav-link:active,
.nav-link:focus{
background-color: lightgreen;
color: white;
}
.our-story figure:hover{
transform: scale(1.15);
}
/**********
Clearfix
**********/
.clearfix:after,
.clearfix:before {
content:" ";
display:table;
clear:both;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="tiempo de taco.css">
<title>Tiempo De taco</title>
</head>
<body>
<header class="clearfix">
<nav>
<h1><a href="#" class="header-title">Tiempo De Taco</a></h1>
<ul id="nav-bar">
<li><a href="#" class="nav-link">Home</a></li>
<li><a href="#our-story" class="nav-link">Our Story</a></li>
<li><a href="#our-specials" class="nav-link">Our Specials</a></li>
<li><a href="" class="nav-link">Gallery</a></li>
</ul>
</nav>
</header>
<section class="clearfix">
<div id="wrapper">
<a id="our-story"></a>
<div class="our-story">
<figure>
<img src="http://www.vancouversun.com/life/cms/binary/7961377.jpg?size=sw620x65">
</figure>
<h1>Our Story</h1>
<p>Mexican cuisine is highly tied to the culture, social structure and its popular traditions, the most important example of which is the use of mole for special occasions and holidays. For this reason and others, Mexican cuisine was added by UNESCO to its list of the world’s "intangible cultural heritage".<br>
Thinking about our roots, we remember our beloved Guadalajara, Jalisco, located in the western-pacific area of Mexico. Guadalajara is the cultural center of Mexico, considered by most to be the home of Mariachi music and host to a number of large-scale cultural events such as the International Film Festival of Guadalajara and the Guadalajara International Book Fair and a number of globally renowned cultural events which draw international crowds.<br>
It is a city full of traditions and color. From there we bring some inspiration into your table. From chiles rellenos with cheese, full of flavorful salsas to delicious tortilla soups we try to give you a little bit of our mexican traditions.
</p>
</div>
</div>
</section>
<section>
<div id="wrapper-two" class="clearfix">
<a id="our-specials"></a>
<h1>Our Specials</h1>
<div>
<p>It is a city full of traditions and color. From there we bring some inspiration into your table. From chiles rellenos with cheese, full of flavorful salsas to delicious tortilla soups we try to give you a little bit of our mexican traditions.<p>
</div>
<div class="specials">
It is a city full of traditions and color. From there we bring some inspiration into your table. From chiles rellenos with cheese, full of flavorful salsas to delicious tortilla soups we try to give you a little bit of our mexican traditions.
</div>
</div>
</section>
</body>
</html>必须使用填充。与填充一起使用框大小调整：如果您不希望内部包含的大小大于父对象的大小，请使用边框框。
另外在#wrapper和#wrappertwo中添加文本align:center，并删除float:left；来自.特价
请查看以下代码以供参考。
body,html{
margin: 0;
padding: 0;
background-color: yellow;
height: 100%;
}
img{
max-width: 100%;
}
/*******
Nav Bar
*******/
header{
background-image:url(https://sunsetstation.sclv.com/~/media/Images/Page-Background-Images/Sunset/SS_Dining_VivaSalsa2.jpg?h=630&la=en&w=1080);
margin: 0;
height:100%;
margin-bottom: 85px;
background-size: cover;
background-repeat: no-repeat;
}
.header-title{
float:left;
text-decoration: none;
color: green;
font-size: 60px;
font-family: 'Monoton', cursive;
font-weight: bolder;
}
#nav-bar{
float: right;
margin: 0;
}
#nav-bar li{
text-decoration: none;
float: left;
list-style-type: none;
}
.nav-link{
float: left;
text-decoration: none;
text-transform: uppercase;
padding: 25px 0;
width: 140px;
transition: .25s color linear,.5s background-color linear;
text-align: center;
color: green;
font-weight: bolder;
}
/*******
About
*******/
#wrapper{
width: 1200px;
margin: 25px auto;
padding: 50px;
box-sizing: border-box;
}
.our-story figure{
float: left;
width: 50%;
margin-top: 8px;
}
.our-story h1{
margin:18px auto;
font-family: 'Pacifico', cursive;
font-size: 4em;
color: green;
}
.our-story p{
line-height: 2.5em;
margin: 0;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: bolder;
}
/*************
Our Specials
*************/
#wrapper-two{
background-color: #b2ff00;
padding: 50px;
box-sizing: border-box;
text-align: center;
}
#wrapper-two h1{
text-align: center;
font-size: 4em;
font-family: 'Pacifico', cursive;
}
.specials{
width: 25%;
margin:0 auto;
display: inline-block;
}
/*************
pseudo classes
**************/
.header-title:hover,
.header-title:focus{
transform: rotate(360deg);
transition: 1s all linear;
}
.nav-link:hover,
.nav-link:active,
.nav-link:focus{
background-color: lightgreen;
color: white;
}
.our-story figure:hover{
transform: scale(1.15);
}
/**********
Clearfix
**********/
.clearfix:after,
.clearfix:before {
content:" ";
display:table;
clear:both;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="tiempo de taco.css">
<title>Tiempo De taco</title>
</head>
<body>
<header class="clearfix">
<nav>
<h1><a href="#" class="header-title">Tiempo De Taco</a></h1>
<ul id="nav-bar">
<li><a href="#" class="nav-link">Home</a></li>
<li><a href="#our-story" class="nav-link">Our Story</a></li>
<li><a href="#our-specials" class="nav-link">Our Specials</a></li>
<li><a href="" class="nav-link">Gallery</a></li>
</ul>
</nav>
</header>
<section class="clearfix">
<div id="wrapper">
<a id="our-story"></a>
<div class="our-story">
<figure>
<img src="http://www.vancouversun.com/life/cms/binary/7961377.jpg?size=sw620x65">
</figure>
<h1>Our Story</h1>
<p>Mexican cuisine is highly tied to the culture, social structure and its popular traditions, the most important example of which is the use of mole for special occasions and holidays. For this reason and others, Mexican cuisine was added by UNESCO to its list of the world’s "intangible cultural heritage".<br>
Thinking about our roots, we remember our beloved Guadalajara, Jalisco, located in the western-pacific area of Mexico. Guadalajara is the cultural center of Mexico, considered by most to be the home of Mariachi music and host to a number of large-scale cultural events such as the International Film Festival of Guadalajara and the Guadalajara International Book Fair and a number of globally renowned cultural events which draw international crowds.<br>
It is a city full of traditions and color. From there we bring some inspiration into your table. From chiles rellenos with cheese, full of flavorful salsas to delicious tortilla soups we try to give you a little bit of our mexican traditions.
</p>
</div>
</div>
</section>
<section>
<div id="wrapper-two" class="clearfix">
<a id="our-specials"></a>
<h1>Our Specials</h1>
<div class="specials">
<p>It is a city full of traditions and color. From there we bring some inspiration into your table. From chiles rellenos with cheese, full of flavorful salsas to delicious tortilla soups we try to give you a little bit of our mexican traditions.<p>
</div>
<div class="specials">
It is a city full of traditions and color. From there we bring some inspiration into your table. From chiles rellenos with cheese, full of flavorful salsas to delicious tortilla soups we try to give you a little bit of our mexican traditions.
</div>
</div>
</section>
</body>
</html>希望这能帮助