再次 所以对我而言，这是一个带有新问题的新的一天。我的问题是我希望每个部分都有不同的全宽背景颜色和固定内容。我完全陷入困境。如果我放入宽度，那么我的背景缩短到宽度，但我的内容是固定的。如果我没有固定宽度，我的背景很棒，但我的内容看起来很糟糕。任何帮助都会有很大的帮助。
P.S。今天在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>
答案 0 :(得分：2)
你必须使用填充。与填充一起使用box-sizing：如果你不希望内部包含的大小超过父包含边框。
在#wrapper和#wrapper-two中添加text-align：center并删除float：left;来自.specials
请查看以下代码以供参考。
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>
希望这有帮助