CODEWITHSUNDEEP
htmlcssfrontend
Ace
Ace

Reputation: 31

Full Width Background with Fixed Width Content (CSS)

again, so for me it's a new day with a new question.My issue is I want every section to have a different full width background color with fixed content. I'm completely stuck.If I put a width in then my background shorten to the width but my content is fixed. If I don't put a fixed width, my background is great but my content looks bad.Any help would be great help.

P.S. Today mark my first full month on html and css so please feel to critique my code if you see anything wrong.I want to improve so all help is appreciated.

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>

Upvotes: 1

Views: 2939

Answers (1)

Rajan Benipuri
Rajan Benipuri

Reputation: 1832

You have to use padding for that. Along with padding use box-sizing : border-box if you don't want the size of inner contain to be more than the parent.

Also add text-align: center in #wrapper and #wrapper-two and remove float: left; from .specials

Please look at the below code for reference.

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>

Hope this helps

Upvotes: 1

Related Questions