Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Daniel Stockham
10,277 Points[SOLVED] header is not filling entire page
I'm out my wits end here. For some reason the site will not fill the entire page.
/*************************
GENERAL
**************************/
body {
font-family: 'open sans', sans-serif;
}
a {
text-decoration: none;
}
img {
max-width: 100%
}
h3 {
margin: 0 0 1em 0;
}
#wrapper {
max-width: 940px;
margin: 0 50px;
padding: 0 5%;
}
/*************************
HEADING
**************************/
/* green header */
header {
background:#A3DAB6;
border-color: #005600;
float: left;
padding: 5px 0 0 0;
margin: 0 0 50px 0;
width: 100%
}
header li {
padding:0;
}
#logo {
text-align: center;
margin: 0;
}
h1 {
font-family: 'Nunito', sans-serif;
margin-top: 0;
font-size:1.75em;
font-weight: normal;
line-height: 0.8em;
}
h2 {
font-size:0.75em;
margin: -5px 0 0;
font-weight:normal;
}
a {
color: #A3DAB6;
}
/*************************
NAVIGATION
**************************/
nav {
text-align: center;
padding: 10px 0;
margin: 20px 0 0;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
font-weight: 800;
padding: 15px 10px;
}
/*************************
FOOTER
**************************/
footer {
font-size: 0.75em;
text-align: center;
padding-top: 50px;
color: #ccc;
clear: both;
}
.social-icon {
width: 20px;
height: 20px;
margin: 0 5px;
}
/*************************
PAGE: PORTFOLIO
**************************/
#gallery {
margin: 0;
padding: 0;
list-style: none;
}
#gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
#gallery li a p {
margin: 0;
padding: 5%;
font-size: 0.75em;
color: #bdc3c7;
}
/*************************
PAGE: ABOUT
**************************/
.profile-photo {
display: block;
max-width: 150px;
margin: 0 auto 30px;
border-radius: 100%;
}
/*************************
PAGE: CONTACT
**************************/
.contact-info {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.9em;
}
.contact-info a {
display: block;
min-height: 30px;
background-repeat: no-repeat;
background-size: 20px 20px;
padding: 0 0 0 30px;
margin: 0 0 10px;
}
.contact-info li.phone a {
background-image: url('../img/phone.png')
}
.contact-info li.mail a {
background-image: url('../img/mail.png')
}
.contact-info li.twitter a {
background-image: url('../img/twitter.png')
}
/*************************
COLORS
**************************/
h1, h2 {
color: #fff;
}
/* nav background on mobile devices */
nav {
background: #005600
}
/* nav link */
nav a, nav a:visited {
color: #fff;
}
/* selected nav link */
nav a.selected, nav a:hover {
color: #c2673f;
}
/* site body */
body {
background-color: #fff;
color: #999;
}`
And here is the html
`/*************************
GENERAL
**************************/
body {
font-family: 'open sans', sans-serif;
}
a {
text-decoration: none;
}
img {
max-width: 100%
}
h3 {
margin: 0 0 1em 0;
}
#wrapper {
max-width: 940px;
margin: 0 50px;
padding: 0 5%;
}
/*************************
HEADING
**************************/
/* green header */
header {
background:#A3DAB6;
border-color: #005600;
float: left;
padding: 5px 0 0 0;
margin: 0 0 50px 0;
width: 100%
}
header li {
padding:0;
}
#logo {
text-align: center;
margin: 0;
}
h1 {
font-family: 'Nunito', sans-serif;
margin-top: 0;
font-size:1.75em;
font-weight: normal;
line-height: 0.8em;
}
h2 {
font-size:0.75em;
margin: -5px 0 0;
font-weight:normal;
}
a {
color: #A3DAB6;
}
/*************************
NAVIGATION
**************************/
nav {
text-align: center;
padding: 10px 0;
margin: 20px 0 0;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
font-weight: 800;
padding: 15px 10px;
}
/*************************
FOOTER
**************************/
footer {
font-size: 0.75em;
text-align: center;
padding-top: 50px;
color: #ccc;
clear: both;
}
.social-icon {
width: 20px;
height: 20px;
margin: 0 5px;
}
/*************************
PAGE: PORTFOLIO
**************************/
#gallery {
margin: 0;
padding: 0;
list-style: none;
}
#gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
#gallery li a p {
margin: 0;
padding: 5%;
font-size: 0.75em;
color: #bdc3c7;
}
/*************************
PAGE: ABOUT
**************************/
.profile-photo {
display: block;
max-width: 150px;
margin: 0 auto 30px;
border-radius: 100%;
}
/*************************
PAGE: CONTACT
**************************/
.contact-info {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.9em;
}
.contact-info a {
display: block;
min-height: 30px;
background-repeat: no-repeat;
background-size: 20px 20px;
padding: 0 0 0 30px;
margin: 0 0 10px;
}
.contact-info li.phone a {
background-image: url('../img/phone.png')
}
.contact-info li.mail a {
background-image: url('../img/mail.png')
}
.contact-info li.twitter a {
background-image: url('../img/twitter.png')
}
/*************************
COLORS
**************************/
h1, h2 {
color: #fff;
}
/* nav background on mobile devices */
nav {
background: #005600
}
/* nav link */
nav a, nav a:visited {
color: #fff;
}
/* selected nav link */
nav a.selected, nav a:hover {
color: #c2673f;
}
/* site body */
body {
background-color: #fff;
color: #999;
}
Daniel Stockham
10,277 PointsThanks, I was told how to put the code in but I must of made a typo when I put up the syntax. I actually figured it out. Chrome likes to add a margin to the body of the site, so I went ahead and zero'd out the margin on the web page. It worked.
Ryan Duchene
Courses Plus Student 46,022 PointsAwesome work! I'll mark this as solved.
1 Answer
Michael Bredthauer
13,429 PointsIf you want the site to fill the page from top to bottom than you need to specify that starting with the main element.
html { height: 100%}, body {height: 100%;}, and so on.
Ryan Duchene
Courses Plus Student 46,022 PointsRyan Duchene
Courses Plus Student 46,022 PointsI tweaked your post to add syntax highlighting. :)