There are spaces in my wrapper and I can't get rid of them. Even though I had set paddings to 0 there is still space. I don't know what the issue is. I don't want to put the wrapper inside a body tag so I can change what I want later.
I'm new to HTML :)
My Code
/*Mohammed Alnujaydi*/
body {background-color:#FCEBB6; color:#221811; font-family: Verdana, Geneva, sans-serif ;
background-image: url(images/background.gif);}
header {background-color:#D2B48C; height: 150px; background-image: url(images/javajamlogo.jpg);
background-repeat: no-repeat;}
h1 { padding-top:45px; padding-left:220px; font-size:3em;}
h2{padding-left:3em; padding-right:2em;}
h3{padding-left:3em; padding-right:2em;}
P{padding-left:3em; padding-right:2em;}
div{padding-left:3em; padding-right:2em;}
ul{padding-left:3em; padding-right:2em;}
dl{padding-left:3em; padding-right:2em;}
nav
{font-weight:Bold; text-align: center; word-spacing: 1em; font-size:1.5em; padding-top:10px ;
float:left; width:200px;
}
nav a { text-decoration: none; }
nav a:link { color: #FEF6C2;}
nav a:visited { color: #D2B48C;}
nav a:hover { color: #CC9933;}
nav ul { list-style-type:none; padding-left:0em;}
h4{ background-color:#D2B48C; font-size:1.2em; padding-left:3em; padding-bottom:0em; padding-right:2em; text-transform:uppercase; border-bottom-style; clear:left;}
main{padding-left:0em; padding-right:0em; padding-bottom:2em; padding-top:0em; background-color: #FEF6C2;margin-left:200px;}
.details {padding-left:20%; padding-right:20%; overflow: auto;}
img{padding-left:10px; padding-right:10px;}
footer {background-color:#D2B48C; font-size:.60em; font-style:italic;text-align:center; padding-bottom:10px;
border-top :solid 2px; color:#221811;}
#wrapper { width: 80%; margin-left: auto;
margin-right: auto; background-color:#FEF6C2; min-width:900px; max-width:1280px; box-shadow: 5px 5px; }
*{ box-sizing: border-box; }
#heroroad {background-image:url(images/heroroad.jpg);background-size:100%;height:250px;}
#heromugs{background-image:url(images/heromugs.jpg);background-size:100%; height:250px;}
#heroguitar {background-image:url(images/heroguitar.jpg);background-size:100%; height:250px;}
.floatleft {float:left; padding-right:2em; padding-bottom:2em;}
header, nav, main, footer { display: block; }
<!DOCTYPE html>
<html lang="en">
<head>
<title> JavaJam Coffee House Menu
</title>
<meta charset="utf-8">
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
<link rel="stylesheet" href="javajam.css">
</head>
<body>
<div id="wrapper">
<header>
<h1>JavaJam Coffee House</h1>
</header>
<nav>
<ul>
<li>
Home</li> <li> Menu </li> <li> Music</li> <li>Job </li> </ul> </nav>
<main>
<div id ="heromugs">
</div>
<h2> Coffee at JavaJam</h2>
<p>Indulge in our locally roasted free-trade coffee and enjoy the aroma,
the smooth taste, the caffeine! Join our Mug Club and get a 10% discount on each cup of coffee you — purchase — ask the barista for details
<dl>
<dt> <strong> Just Java </strong></dt>
<dd>Regular house blend, decaffeinated coffee, or flavor of the day.<br>
Endless Cup $3.00</dd>
<dt> <strong> Cafe au Lait</strong></dt>
<dd>House blended coffee infused into a smooth, steamed milk.<br>
Single $2.00 Double $4.00</dd>
<dt> <strong> Iced Cappuccino </strong></dt>
<dd>Sweetened espresso blended with icy-cold milk and served in a chilled glass.<br>
Single $4.75 Double $6.00 </dd>
</dl>
</main>
<br>
<footer>
Copyright © 2018 JavaJam Coffee House<br>
Malnujaydi#dbq.edu
</footer>
</div>
</body>
</html>
and this is a picture for clarification (the space with the blue)
There was a css style in your code giving all div elements padding of padding-left:3em; padding-right:2em, so I removed that. Is the result below what you had in mind?
body {
background-color: #FCEBB6;
color: #221811;
font-family: Verdana, Geneva, sans-serif;
background-image: url(images/background.gif);
}
header {
background-color: #D2B48C;
height: 150px;
background-image: url(images/javajamlogo.jpg);
background-repeat: no-repeat;
}
h1 {
padding-top: 45px;
padding-left: 220px;
font-size: 3em;
}
h2 {
padding-left: 3em;
padding-right: 2em;
}
h3 {
padding-left: 3em;
padding-right: 2em;
}
P {
padding-left: 3em;
padding-right: 2em;
}
/* div{padding-left:3em; padding-right:2em;} */
ul {
padding-left: 3em;
padding-right: 2em;
}
dl {
padding-left: 3em;
padding-right: 2em;
}
nav {
font-weight: Bold;
text-align: center;
word-spacing: 1em;
font-size: 1.5em;
padding-top: 10px;
float: left;
width: 200px;
}
nav a {
text-decoration: none;
}
nav a:link {
color: #FEF6C2;
}
nav a:visited {
color: #D2B48C;
}
nav a:hover {
color: #CC9933;
}
nav ul {
list-style-type: none;
padding-left: 0em;
}
h4 {
background-color: #D2B48C;
font-size: 1.2em;
padding-left: 3em;
padding-bottom: 0em;
padding-right: 2em;
text-transform: uppercase;
border-bottom-style;
clear: left;
}
main {
padding-left: 0em;
padding-right: 0em;
padding-bottom: 2em;
padding-top: 0em;
background-color: #FEF6C2;
margin-left: 200px;
}
.details {
padding-left: 20%;
padding-right: 20%;
overflow: auto;
}
img {
padding-left: 10px;
padding-right: 10px;
}
footer {
background-color: #D2B48C;
font-size: .60em;
font-style: italic;
text-align: center;
padding-bottom: 10px;
border-top: solid 2px;
color: #221811;
}
#wrapper {
width: 80%;
margin-left: auto;
margin-right: auto;
background-color: #FEF6C2;
min-width: 900px;
max-width: 1280px;
box-shadow: 5px 5px;
}
* {
box-sizing: border-box;
}
#heroroad {
background-image: url(images/heroroad.jpg);
background-size: 100%;
height: 250px;
}
#heromugs {
background-image: url(images/heromugs.jpg);
background-size: 100%;
height: 250px;
}
#heroguitar {
background-image: url(images/heroguitar.jpg);
background-size: 100%;
height: 250px;
}
.floatleft {
float: left;
padding-right: 2em;
padding-bottom: 2em;
}
header,
nav,
main,
footer {
display: block;
}
<div id="wrapper">
<header>
<h1>JavaJam Coffee House</h1>
</header>
<nav>
<ul>
<li>
Home</li>
<li>
Menu
</li>
<li>
Music
</li>
<li>
Job
</li>
</ul>
</nav>
<main>
<div id="heromugs">
</div>
<h2> Coffee at JavaJam</h2>
<p>Indulge in our locally roasted free-trade coffee and enjoy the aroma, the smooth taste, the caffeine! Join our Mug Club and get a 10% discount on each cup of coffee you — purchase — ask the barista for details
<dl>
<dt>
<strong> Just Java </strong>
</dt>
<dd>
Regular house blend, decaffeinated coffee, or flavor of the day.<br> Endless Cup $3.00
</dd>
<dt>
<strong> Cafe au Lait</strong>
</dt>
<dd>
House blended coffee infused into a smooth, steamed milk.<br> Single $2.00 Double $4.00
</dd>
<dt>
<strong> Iced Cappuccino </strong>
</dt>
<dd>
Sweetened espresso blended with icy-cold milk and served in a chilled glass.<br> Single $4.75 Double $6.00
</dd>
</dl>
</p>
</main>
<br>
<footer>
Copyright © 2018 JavaJam Coffee House<br>
Malnujaydi#dbq.edu
</footer>
</div>
I removed div{padding-left:3em; padding-right:2em;} because it adds to all divs including your #wrapper.
Then put margin:0; padding:0; on the body (some browsers add that in so start every project with this style rule on the body).
/*Mohammed Alnujaydi*/
body {background-color:#FCEBB6; color:#221811; font-family: Verdana, Geneva, sans-serif ; padding:0; margin:0;
background-image: url(images/background.gif);}
header {background-color:#D2B48C; height: 150px; background-image: url(images/javajamlogo.jpg);
background-repeat: no-repeat;}
h1 { padding-top:45px; padding-left:220px; font-size:3em;}
h2{padding-left:3em; padding-right:2em;}
h3{padding-left:3em; padding-right:2em;}
P{padding-left:3em; padding-right:2em;}
ul{padding-left:3em; padding-right:2em;}
dl{padding-left:3em; padding-right:2em;}
nav
{font-weight:Bold; text-align: center; word-spacing: 1em; font-size:1.5em; padding-top:10px ;
float:left; width:200px;
}
nav a { text-decoration: none; }
nav a:link { color: #FEF6C2;}
nav a:visited { color: #D2B48C;}
nav a:hover { color: #CC9933;}
nav ul { list-style-type:none; padding-left:0em;}
h4{ background-color:#D2B48C; font-size:1.2em; padding-left:3em; padding-bottom:0em; padding-right:2em; text-transform:uppercase; border-bottom-style; clear:left;}
main{padding-left:0em; padding-right:0em; padding-bottom:2em; padding-top:0em; background-color: #FEF6C2;margin-left:200px;}
.details {padding-left:20%; padding-right:20%; overflow: auto;}
img{padding-left:10px; padding-right:10px;}
footer {background-color:#D2B48C; font-size:.60em; font-style:italic;text-align:center; padding-bottom:10px;
border-top :solid 2px; color:#221811;}
#wrapper { width: 80%; margin-left: auto;
margin-right: auto; background-color:#FEF6C2; min-width:900px; max-width:1280px; box-shadow: 5px 5px; }
*{ box-sizing: border-box; }
#heroroad {background-image:url(images/heroroad.jpg);background-size:100%;height:250px;}
#heromugs{background-image:url(images/heromugs.jpg);background-size:100%; height:250px;}
#heroguitar {background-image:url(images/heroguitar.jpg);background-size:100%; height:250px;}
.floatleft {float:left; padding-right:2em; padding-bottom:2em;}
header, nav, main, footer { display: block; }
<!DOCTYPE html>
<html lang="en">
<head>
<title> JavaJam Coffee House Menu
</title>
<meta charset="utf-8">
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
<link rel="stylesheet" href="javajam.css">
</head>
<body>
<div id="wrapper">
<header>
<h1>JavaJam Coffee House</h1>
</header>
<nav>
<ul>
<li>
Home</li> <li> Menu </li> <li> Music</li> <li>Job </li> </ul> </nav>
<main>
<div id ="heromugs">
</div>
<h2> Coffee at JavaJam</h2>
<p>Indulge in our locally roasted free-trade coffee and enjoy the aroma,
the smooth taste, the caffeine! Join our Mug Club and get a 10% discount on each cup of coffee you — purchase — ask the barista for details
<dl>
<dt> <strong> Just Java </strong></dt>
<dd>Regular house blend, decaffeinated coffee, or flavor of the day.<br>
Endless Cup $3.00</dd>
<dt> <strong> Cafe au Lait</strong></dt>
<dd>House blended coffee infused into a smooth, steamed milk.<br>
Single $2.00 Double $4.00</dd>
<dt> <strong> Iced Cappuccino </strong></dt>
<dd>Sweetened espresso blended with icy-cold milk and served in a chilled glass.<br>
Single $4.75 Double $6.00 </dd>
</dl>
</main>
<br>
<footer>
Copyright © 2018 JavaJam Coffee House<br>
Malnujaydi#dbq.edu
</footer>
</div>
</body>
</html>
You are adding padding to every div element with this line of css:
div{padding-left:3em; padding-right:2em;}
Remove that and your issue is resolved.
Related
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>Tiempo De Taco</h1>
<ul id="nav-bar">
<li>Home</li>
<li>Our Story</li>
<li>Our Specials</li>
<li>Gallery</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>Tiempo De Taco</h1>
<ul id="nav-bar">
<li>Home</li>
<li>Our Story</li>
<li>Our Specials</li>
<li>Gallery</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>
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>Tiempo De Taco</h1>
<ul id="nav-bar">
<li>Home</li>
<li>Our Story</li>
<li>Our Specials</li>
<li>Gallery</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
I am trying to float my aside element to the right of my main element and for some reason it is too large. I specified the width of the main as 60% and the aside as 39% (because the body element is 99%) but somehow this ratio is just not displayed correctly.
Here is the html and css:
* {
margin: 0;
padding: 0;
}
html {
background: url("/images/sheetmusic.gif") repeat 0 0;
background-size: 30%;
background-attachment: fixed;
background-position: center;
}
body {
font-family: arial, Helvetica, sans-serif;
font-size: 100%;
width: 99%;
max-width: 800px;
margin: 0 auto;
background-color: rgba(255, 248, 228, 0.95);
border: 2px solid #585858;
}
a:link {
color: #e07400;
}
a:visited {
color: gray;
}
a:hover,
a:focus {
font-style: italic;
}
/*====================HEADER========================*/
header img {
float: left;
width: 100%;
max-width: 136.078px;
}
.orange_header {
color: #e07400;
}
header h1 {
margin: 0 auto;
font-size: 200%;
text-shadow: 2px 1px 1px black;
padding-top: 0.7em;
padding-bottom: 0.5em;
}
/*====================NAV MENU========================*/
#nav_menu a {
margin: 0;
border-right: 1px solid silver;
}
#nav_menu a.current {
color: white;
display: block;
background-color: #a78349;
}
#nav_menu ul {
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
height: 34px;
}
#nav_menu>ul>li {
float: left;
width: 20.748125%;
/* 165.985/800*100 */
}
#nav_menu ul li a {
display: block;
text-align: center;
text-decoration: none;
padding: 0.5em 0;
margin: 0;
background-color: #ab6b06;
color: white;
}
#nav_menu ul ul {
display: none;
position: absolute;
top: 100%;
}
#nav_menu ul ul li {
float: none;
}
#nav_menu ul li:hover>ul {
display: block
}
#nav_menu>ul::after {
content: "";
clear: both;
display: block;
}
#lastmenuitem {
border: none;
}
/*====================MAIN========================*/
main {
display: block;
position: relative;
width: 60%;
}
main h2 {
font-size: 150%;
padding-top: 0.5em;
padding-bottom: 0.2em;
padding-left: 1em;
}
strong {
color: #ab6b06;
}
main p {
font-size: 100%;
padding-left: 1.5em;
padding-right: .5em;
padding-bottom: 1em;
}
main ul,
ol {
padding-left: 3em;
padding-right: .5em;
padding-bottom: 1em;
line-height: 1.2em;
}
/*=============ASIDE====================*/
aside {
display: block;
float: right;
width: 39%;
margin-top: 1em;
border-left: 2px solid #ab6b06;
}
aside h3 {
font-size: 120%;
margin-left: 1em;
margin-bottom: 0.2em;
}
aside>p {
padding: 0;
margin-left: 1em;
margin-right: .5em;
word-wrap: break-word;
}
#sittingpic {
padding-left: 2em;
}
blockquote {
margin-left: 1em;
margin-right: .5em;
margin-bottom: 1em;
text-indent: 0;
}
.image {
position: relative;
border: 1px solid #333;
margin: 2%;
margin-left: 1em;
}
.image img {
width: 70%;
max-width: 150px;
}
iframe {
padding-left: 2em;
width: 90%;
max-width: 720px;
}
/*====================FOOTER========================*/
footer {
background-color: #ab6b06;
font-family: georgia, serif;
font-size: 90%;
text-align: center;
}
<html lang="en">
<head>
<meta charset="utf-8">
<title>Annemie's Guitar School | Learn Classical Guitar</title>
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="stylesheet" href="styles/normalize.css">
<link rel="stylesheet" href="styles/main.css">
</head>
<body>
<header>
<img src="images/guitarlogo2.png" alt="Guitar" height="109.93">
<h1 class="orange_header">Annemie's Guitar School</h1>
</header>
<nav id="nav_menu">
<ul>
<li>Home</li>
<li>Useful links</li>
<li>Lessons
<ul>
<li>Sitting position</li>
<li>Reading music</li>
<li>Right Hand Technique</li>
<li>Left Hand Technique</li>
<li>Practising and Memorization</li>
</ul>
</li>
<li>Bio</li>
</ul>
</nav>
<main>
<aside>
<h3>History of the guitar</h3>
<p>In this documentary, Julian Bream walks you through the history of the classical guitar in Spain. He plays pieces that are relevant to the different eras of the guitar. Although the documentary is fairly slow paced - it is worth the watch! <br>
Watch video
</p>
<h3>Anatomy of the guitar</h3>
<img src="images/clas-diagram.jpg" alt="Guitar Diagram" class="image" height="300">
<h3>Quote of the day</h3>
<blockquote>“Sometimes you want to give up the guitar, you’ll hate the guitar. But if you stick with it, you’re gonna be rewarded” ~<cite> Jimi Hendrix</cite></blockquote>
</aside>
<h2 class="orange_header">Classical Guitar</h2>
<p>The guitar is arguably the most popular and versatile instrument in the world. It is used in a variety of different musical styles like rock, blues, folk and pop. <strong>This school focusses on the classical style of playing. </strong> With classical
guitar you use nylon strings and play all the voices (bass, alto, soprano) using a special right hand technique. The guitar becomes a “mini orchestra”.</p>
<h2 class="orange_header">Before you start...</h2>
<p>This school requires you to know a few basics before you can start the lessons. <br>We assume that you can:</p>
<ul>
<li>Tune your guitar</li>
<li>Play chords comfortably</li>
<li>Read tablature</li>
</ul>
<p>If you can‘t do these things - do not worry!<br> We suggest you make use of the “Useful links” page to teach yourself the basics of guitar.</p>
<h2 class="orange_header">The Lessons</h2>
<ol>
<li>Sitting position</li>
<li>Reading music</li>
<li>Right Hand Technique</li>
<li>Left Hand Technique</li>
<li>Practising and Memorization</li>
</ol>
<h2 class="orange_header">About Annemie</h2>
<p>Find out more about the author of this site by going to the Bio page.</p>
</main>
<footer>
<p>©2017, Annemie's Guitar School</p>
</footer>
</body>
</html>
I think you misunderstood the concept of widths. You set the width of main to 60%. This will cover only the 60% of the body tag. You also set the width of aside to 39%, but this element is parent to main. That means that it will cover the 39% of the main container. I don't know if I understood your question (I don't have the reputation right now to ask for more details with comments) so I consider you want something like the following (excuse my bad drawing skills):
click to see the image
I propose to make the following changes:
First create a new div element (I named it main-content) and add the left floating content inside it.
<main>
<aside>
<h3>History of the guitar</h3>
<p>In this documentary, Julian Bream walks you through the history of the classical guitar in Spain. He plays pieces that are relevant to the different eras of the guitar. Although the documentary is fairly slow paced - it is worth the watch! <br>
Watch video
</p>
<h3>Anatomy of the guitar</h3>
<img src="images/clas-diagram.jpg" alt="Guitar Diagram" class="image" height="300">
<h3>Quote of the day</h3>
<blockquote>“Sometimes you want to give up the guitar, you’ll hate the guitar. But if you stick with it, you’re gonna be rewarded” ~<cite> Jimi Hendrix</cite></blockquote>
</aside>
<!-- the newly created div -->
<div id="main-content">
<h2 class="orange_header">Classical Guitar</h2>
<p>The guitar is arguably the most popular and versatile instrument in the world. It is used in a variety of different musical styles like rock, blues, folk and pop. <strong>This school focusses on the classical style of playing. </strong> With classical
guitar you use nylon strings and play all the voices (bass, alto, soprano) using a special right hand technique. The guitar becomes a “mini orchestra”.</p>
<h2 class="orange_header">Before you start...</h2>
<p>This school requires you to know a few basics before you can start the lessons. <br>We assume that you can:</p>
<ul>
<li>Tune your guitar</li>
<li>Play chords comfortably</li>
<li>Read tablature</li>
</ul>
<p>If you can‘t do these things - do not worry!<br> We suggest you make use of the “Useful links” page to teach yourself the basics of guitar.</p>
<h2 class="orange_header">The Lessons</h2>
<ol>
<li>Sitting position</li>
<li>Reading music</li>
<li>Right Hand Technique</li>
<li>Left Hand Technique</li>
<li>Practising and Memorization</li>
</ol>
<h2 class="orange_header">About Annemie</h2>
<p>Find out more about the author of this site by going to the Bio page.</p>
</div>
<!-- new div ends here -->
</main>
Then change your css style to this:
/* we removed the width property to cover the whole page. */
main {
display: block;
position: relative;
}
aside {
display: block;
float: right;
width: 40%; /* this was changed */
margin-top: 1em;
border-left: 2px solid #ab6b06;
}
#main-content {
width: 60%;
}
The objective is to setup a 2 column CSS layout. The text book in class makes it sound as easy as editing the CSS Nav by making it float left. However, it will not extend the Nav column all the way to the bottom of the page as their example shows, but it does float in the upper left.
CSS:
body{
background-color: #ffffff;
color: #666666;
font: sans-serif;
background-image: url(background.jpg);
}
header{
background-color: #000033;
color: #ffffff;
font: sans-serif;
}
nav{
float: left;
width: 90px;
position: absolute;
background-color: #90c7e3;
text-decoration: none;
font-weight: bold;
padding: 5px;
}
main{
display: block;
}
h1{
line-height: 200%;
background-image: url(sunset.jpg);
background-repeat: no-repeat;
background-position: right;
padding-left: 20px;
height: 72 px;
margin-bottom: 0;
}
h2
{
color: #3399cc;
font: serif;
}
h3
{
color: #000033;
}
dt
{
color: #000033;
font-weight: bold;
}
#resort
{
color: #000033;
font-size: 1.2em;
}
#footer
{
margin-left: 100px;
padding: 10px;
font-size: .7em;
font-style: italic;
text-align: center;
}
#wrapper
{
background-color: #ffffff;
min-width: 700px;
max-width: 1024px;
margin-left: auto;
margin-right: auto;
width: 80%;
box-shadow: 5px 5px 5px #000033;
}
#homehero
{
height: 300px;
background-image: url(coast.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
#yurthero
{
height: 300px;
background-image: url(yurt.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
#trailhero
{
height: 300px;
background-image: url(trail.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
HTML:
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="pacific.css">
<title>Pacific Trails Resort</title>
<meta charset="UTF-8">
</head>
<body>
<div id="wrapper">
<header>
<h1>Pacific Trails Resort</h1>
</header>
<nav>
Home
Yurts
Activities
Reservations
</nav>
<div id="homehero">
</div>
<main>
<h2>Enjoy Nature in Luxury</h2>
<p><span class="resort">Pacific Trails Resort</span> offers a special lodging experience on the California North Coast. Relax in serenity with panoramic views of the Pacific Ocean.</p>
<ul>
<li>Private yurts with decks overlooking the ocean</li>
<li>Activities lodge with fireplace and gift shop</li>
<li>Nightly fine dining at the Overlook Cafe</li>
<li>Heated outdoor pool and whirlpool</li>
<li>Guided hiking tours of the redwoods</li>
</ul>
<div>
<span class="resort">Pacific Trails Resort</span><br>
12010 Pacific Trails Road<br>
Zephyr, CA 95555<br>
888-555-5555<br>
</div>
</main>
<footer>
<div id="footer">
Copyright © 2016 Pacific Trails Resort<br>
</div>
</footer>
</div>
</body>
</html>
As I noted in my comment, you can add float right on the main element and then give the nav a height. You'll also need to restrict the width of the main element so that it fits next to the nav.
Check out this snippet to see this:
body{
background-color: #ffffff;
color: #666666;
font: sans-serif;
background-image: url(background.jpg);
position: relative;
}
header{
background-color: #000033;
color: #ffffff;
font: sans-serif;
}
nav{
width: 90px;
position: absolute;
background-color: #90c7e3;
text-decoration: none;
font-weight: bold;
padding: 5px;
height: 100%;
}
main{
display: block;
float: right;
width: 80%;
}
h1{
line-height: 200%;
background-image: url(sunset.jpg);
background-repeat: no-repeat;
background-position: right;
padding-left: 20px;
height: 72 px;
margin-bottom: 0;
}
h2
{
color: #3399cc;
font: serif;
}
h3
{
color: #000033;
}
dt
{
color: #000033;
font-weight: bold;
}
#resort
{
color: #000033;
font-size: 1.2em;
}
#footer
{
margin-left: 100px;
padding: 10px;
font-size: .7em;
font-style: italic;
text-align: center;
}
#wrapper
{
background-color: #ffffff;
min-width: 700px;
max-width: 1024px;
margin-left: auto;
margin-right: auto;
width: 80%;
box-shadow: 5px 5px 5px #000033;
}
#homehero
{
height: 300px;
background-image: url(coast.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
#yurthero
{
height: 300px;
background-image: url(yurt.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
#trailhero
{
height: 300px;
background-image: url(trail.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="pacific.css">
<title>Pacific Trails Resort</title>
<meta charset="UTF-8">
</head>
<body>
<header>
<h1>Pacific Trails Resort</h1>
</header>
<div id="wrapper">
<nav>
Home
Yurts
Activities
Reservations
</nav>
<main>
<div id="homehero">
</div>
<h2>Enjoy Nature in Luxury</h2>
<p><span class="resort">Pacific Trails Resort</span> offers a special lodging experience on the California North Coast. Relax in serenity with panoramic views of the Pacific Ocean.</p>
<ul>
<li>Private yurts with decks overlooking the ocean</li>
<li>Activities lodge with fireplace and gift shop</li>
<li>Nightly fine dining at the Overlook Cafe</li>
<li>Heated outdoor pool and whirlpool</li>
<li>Guided hiking tours of the redwoods</li>
</ul>
<div>
<span class="resort">Pacific Trails Resort</span><br>
12010 Pacific Trails Road<br>
Zephyr, CA 95555<br>
888-555-5555<br>
</div>
</main>
</div>
<footer>
<div id="footer">
Copyright © 2016 Pacific Trails Resort<br>
</div>
</footer>
</body>
</html>
I noticed that you had a position absolute on the nav. I ran with that and positioned it relative to the body. I also moved the header and footer out of the wrapper div so that the wrapper only contains your nav and main elements. I moved the home hero into the main element so that it too will be floated right.
By wrapping the main and nav elements only in the wrapper, we can add height: 100%; to the nav element to take the full height of the wrapper. If we kept the header and footer in the wrapper, the nav would still be 100% of the height of the wrapper but now it would be too large because it doesn't discount the height of the header and the footer.
One other thing to note is that I removed the float: left; on the nav because the position: absolute; makes it irrelevant.
I want to remove the blue color above main and below main. I debug for several days, but just do not know how to fix this bug. Please help.
I attached my Page and my desire page.
body {
background-color:#FFFFFF;
background-image: url(background.jpg);
color: #666666;
font-family: Verdana, Arial, sans-serif;
}
* {
box-sizing: border-box;
}
header {
background-color: #000033;
color: #FFFFFF;
font-family: Georgia, serif;
}
h1 {
line-height: 200%;
background-image: url(sunset.jpg);
background-position: right;
background-repeat: no-repeat;
padding-left: 20px;
height: 72px;
margin-bottom: 0;
}
nav {
font-weight:bold;
float: left;
width: 160px;
padding-top: 20px;
padding-right: 5px;
padding-left: 20px;
}
nav a {
text-decoration: none;
}
nav a:link {
color: #000033;
}
nav a:visited {
color: #344873;
}
nav a:hover {
color: #FFFFFF;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
main {
padding-left: 20px;
padding-right: 20px;
display: block;
background-color: #FFFFFF;
margin-left: 170px;
margin-top: 1px;
margin-bottom: 1px;
}
h2 {
color: #3399CC;
font-family: Georgia, serif;
}
h3 {
color: #000033;
}
dt {
color: #000033;
font-weight: bold;
}
.resort {
color: #000033;
font-size: 1.2em;
}
footer {
font-size: 0.70em;
font-style: italic;
text-align: center;
padding: 10px;
background-color: #FFFFFF;
margin-left: 170px;
}
#wrapper {
background-color: #90C7E3;
margin-left: auto;
margin-right: auto;
width: 80%;
min-width: 700px;
max-width: 1024px;
box-shadow: 5px 5px 5px black;
}
#homehero {
height: 300px;
background-image: url(coast.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
margin-left: 170px;
}
#yurthero {
height: 300px;
background-image: url(yurt.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
margin-left:170px;
}
#trailhero {
height: 300px;
background-image: url(trail.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
margin-left: 170px;
}
header, nav, main, footer {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pacific Trails Resort :: Yurts</title>
<link href="pacific.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<meta charset="utf-8">
</head>
<body>
<div id="wrapper">
<header>
<h1>Pacific Trails Resort</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>Yurts</li>
<li>Activities</li>
<li>Reservations</li>
</ul>
</nav>
<div id="yurthero"></div>
<main>
<h2>The Yurts at Pacific Trails</h2>
<dl>
<dt>What is a yurt?</dt>
<dd>Our luxuy yurts are permanent structures four feet off the ground. Each yurt has canvas walls, a wooden floor
and a roof dome that can be opened.</dd>
<dt>How are the yurts furnished?</dt>
<dd>Each yurt is furnished with a queen-size bed with down quilt and gas-fire stove. The luxury camping experience
also includes elecricity and a sink with hot and cold running water. Shower and restroom facilities are located
in the lodge.</dd>
<dt>What should I bring?</dt>
<dd>Bring a sense of adventure and some time to relax! Most guests also pack comfortable walking shoes and plan to
dress for changing weather with layers of clothing.</dd>
</dl>
</main>
<footer>
<small><i>Copyright © 2016 Pacific Trails Resort</i></small><br>
</footer>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pacific Trails Resort</title>
<link href="pacific.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<meta charset = "utf-8">
</head>
<body>
<div id="wrapper">
<header>
<h1>Pacific Trails Resort</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>Yurts</li>
<li>Activities</li>
<li>Reservations</li>
</ul>
</nav>
<div id="homehero"></div>
<main>
<h2>Enjoy Nature in Luxury</h2>
<p><span class="resort">Pacific Trails Resort</span> offers a special lodging experience on the California North Coast. Relax in serenity with
panoramic views of the Pacific Ocean.</p>
<ul>
<li>Private yurts with decks overlooking the ocean</li>
<li>Activities lodge with fireplace and gift shop</li>
<li>Nightly fine dining at the Overlook Cafe</li>
<li>Heated outdoor pool and whirlpool</li>
<li>Guided hiking tours of the redwoods</li>
</ul>
<div>
<span class="resort">Pacific Trails Resort</span><br>
12010 Pacific Trails Road<br>
Zephyr, CA 95555<br><br>
888-555-5555<br>
</div>
</main>
<footer>
Copyright © 2016 Pacific Trails Resort<br>
</footer>
</div>
</body>
</html>
Your code is for two separate pages. Without having a working fiddle I would just recommend setting the margin bottom to 0px for the image and margin top 0 for the div with the white background.
You could also the the margin top for the div with the white background to minus (example: margin-top:-20px;). A quick and simple solution is to set margin-top to -30px in ur css for main and that will get you the desired effect.
https://jsfiddle.net/26f8ntwm/
main {
padding-left: 20px;
padding-right: 20px;
display: block;
background-color: #FFFFFF;
margin-left: 170px;
**margin-top: -30px;**
margin-bottom: 1px;
padding-top:0px;
}
Your wrapper element has a blue background (#90C7E3), and since nav and footer don't have a background (i.e. their background is transparent), and they are inside #wrapper, that wrapper background color is visible in nav and footer:
#wrapper {
background-color: #90C7E3;
etc.
Solution: Just erase the first line from this rule, or give backgrounds to nav and footer.
In my CSS, the redbar.png image is going higher than it needs to be (located in #container). It's going over my horizontal nav and shouldn't be and I'm bot entirely sure how to get it to go away.. Any tips would be greatly appreciated!
Here is the website with the issue : http://cit.macc.edu/~nduncan/tut4/case2/redball.htm
Here is my HTML code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Red Ball Pizza</title>
<script src="modernizr-1.5.js"></script>
<link href="pizza.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<header><img src="rblogo.png" alt="Red Ball Pizza" /></header>
<nav class="horizontal">
<ul>
<li>Home</li>
<li>Menu</li>
<li>Locations</li>
<li>Catering</li>
<li>About Us</li>
</ul>
</nav>
<nav class="vertical">
<ul>
<li>Pizza</li>
<li>Salad</li>
<li>Pasta</li>
<li>Sandwiches</li>
<li>Appetizers</li>
<li>Pocket Pizzas</li>
<li>Fish & Shrimp</li>
<li>Chicken & Wings</li>
<li>Beverages</li>
<li>Dessert</li>
<li>Catering</li>
<li>Download Menu</li>
<li>Catering Menu</li>
</ul>
</nav>
<section id="main">
<img src="toppings.png" alt="" />
<p>At Red Ball Pizza, we want to satisfy every appetite. That's
why our menu contains a variety of different items. With
so many choices, everyone's favorites are available!
</p>
<p>
Red Ball Pizza is NOT a franchise, a chain, or a corporation.
It is 100% locally owned and operated. Red Ball Pizza is
devoted to providing the highest quality and the best service
possible. Our only goal is to provide you with a great
pizza … EVERY TIME!
</p>
<div class="coupon">
<h1>Classic Combo</h1>
<p>16" 1-Topping Pizza
& a 2-Liter of Your Choice
For Only $14.99
</p>
<p>Expires 3/14</p>
</div>
<div class="coupon">
<h1>Pizza & Stix</h1>
<p>16" Specialty Pizza
Reg. Cheese Stix & a 2-Liter
For Only $21.99
</p>
<p>Expires 3/14</p>
</div>
<div class="coupon">
<h1>1/2 Price</h1>
<p>Buy any 16" Specialty Pizza
at Reg. Price & Get a 2nd
Pizza For Half Price
</p>
<p>Expires 3/14</p>
</div>
<div class="coupon">
<h1>Pizza & Wings</h1>
<p>14" 2-Topping Pizza
& 12 Wings
For Only $15.99
</p>
<p>Expires 3/31</p>
</div>
<div class="coupon">
<h1>$3.00 Off</h1>
<p>Get $3.00 Off
any 16" Pizza at
Menu Price
</p>
<p>Expires 3/31</p>
</div>
<div class="coupon">
<h1>Sub Dinner</h1>
<p>1 Toasted Sub & Chips
& 1 20oz Soda
For Only $6.99
</p>
<p>Expires 3/31</p>
</div>
</section>
<aside>
<h1>Pizza Pizzazz</h1>
<ul>
<li>93% of Americans eat pizza at least once a month.</li>
<li>Mozzarella was originally made from the milk of Indian
water buffalo in the 7th century.</li>
<li>75 acres of cheese is eaten every day.</li>
<li>23 pounds of cheese is eaten every year by the average
person.</li>
<li>The tomato was brought back to Italy by Spaniards returning
from Mexico in the 16th century.</li>
<li>The busiest night for take-out pizza orders is Halloween.</li>
<li>The first pizzeria opened in 1830 in Naples, Italy. </li>
</ul>
</aside>
<footer>
<address>
Red Ball Pizza •
811 Beach Drive •
Ormond Beach, FL 32175 •
(386) 555 - 7499
</address>
</footer>
</div>
</body>
</html>
And here is my CSS. Problem lies in #container.
header, section, aside, footer, nav {
display: block;
}
/* body styles */
body {
background-color: red;
font-family: Verdana, Geneva, sans-serif;
padding: 0px;
margin: 0px;
}
#container {
width: 1000px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
border-left: 1px solid black;
border-right: 1px solid black;
background: white url(redbar.png) top left repeat-y;
}
#container header {
background-color: white;
height: 100px;
}
#container nav.horizontal {
height: 70px;
width: 100%;
background-color: white;
}
#container nav.horizontal ul li{
background-color: white;
font-size: 16px;
height: 50px;
line-height: 50px;
width: 180px;
display: block;
float: left;
margin-left: 5px;
margin-right: 5px;
text-align: center;
}
#container nav.horizontal ul li a{
display: block;
background-color: red;
color: white;
text-decoration: none;
border-radius: 30px / 25px;
}
#container nav.horizontal ul li a:hover {
background-color: rgb(255,101,101);
color: black;
}
#container nav.vertical {
float: left;
clear: left;
width: 200px;
}
#container nav.vertical ul li {
list-style-type: none;
text-indent: 20px;
margin-top: 20px;
margin-bottom: 20px;
}
#container nav.vertical ul li a {
color: white;
text-decoration: none;
}
#container nav.vertical ul li a:hover {
color: black;
}
#main {
background-color: rgb(255,211,211);
float: left;
width: 600px;
}
#main p {
font-size: 20px;
margin: 15px;
}
#main img{
float: right;
margin: 15px;
width: 350px;
border-bottom-left-radius: 350px;
}
#main div.coupon {
border: 5px dashed black;
float: left;
width: 170px;
height: 150px;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 10px;
margin-right: 10px;
background-image: url(slice.png), url(notice.png);
background-position: center, bottom right;
background-repeat: no-repeat;
background-color: white;
}
#main div.coupon h1 {
color: white;
background-color: rgb(192,0,0);
font-size: 16px;
letter-spacing: 2px;
text-align: center;
height: 25px;
font-variant: small-caps;
}
#main div.coupon p{
font-size: 14px;
text-align: center;
margin: 5px;
}
aside {
float: left;
width: 200px;
}
aside h1 {
color: rgb(192,0,0);
font-size: 20px;
letter-spacing: 2px;
font-weight: normal;
text-align: center;
}
aside ul li {
background-color: rgb(255,135,135);
border-radius: 5px;
color: black;
list-style-type: none;
margin: 10px;
padding: 5px;
}
footer {
margin-left: 200px;
clear: left;
}
footer address {
border-top: 1px solid red;
color: red;
font-size: 10px;
font-style: normal;
text-align: center;
margin-top: 25px;
padding-bottom: 20px;
}
#container nav.horizontal {
margin-top: -16px;
}
Add this to CSS.
Ok, here we go, just because I love you. I think the problem you describe is being caused by the ul element inside of your horizontal class div. By default browsers will give uls padding/margin. All I had to do to fix this was set .horizontal ul {margin:0; padding: 0;}.
you could clear the nav by adding the following
container nav.horizontal {
...
overflow: auto;
then you probably want to add the appropriate margin / padding such as margin-bottom: 16px to get inline with the margin on the ul.
Also, you should look into css resets. I didn't see any here and they'll make you life easier.