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
glenn romaniuk
33,659 Pointsheader wont center using css
The max size of the header, sidebar, content, and footer a supposed to restrict themselves to 1200px width max. This worked for me until i set the header div to a table to use it to center the title for my mobile breakpoint. Why is the header left justification not staying in line with the sidebar text when you resize the browser window to a width greater than 1200px?
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="header"> <div class="sub-header"> <h1>Header</h1> </div> </div> <div class="wrapper"> <div class="sidebar"> <h1>Sidebar</h1> </div> <div class="content"> <h1>Content</h1> </div> <div class="footer"> <h1>Footer</h1> </div> </div> </body> </html>
/Layout Element Colors/
.header { background-color: #384047; } .main-logo { background-color: #5fcf80; } .main-nav li { background-color: #3f8abf; } .sidebar { background-color: #caebf6; } .content { background-color: #bfe3d0; } .footer { background-color: #b7c0c7; } .sidebar { background-color: #ff8888; }
/Fix Display Issues/
h1 { margin: 0; }
/General/
html, body, .wrapper { height: 100%; }
.header { width: 100%; display:table; }
.sub-header { display:table-cell; vertical-align: middle; text-align: center; }
/Mobile/
.header, .sub-header, .footer { height: 100px; }
.sidebar, .content { height: 100%; }
/Tablet & Desktop/
@media screen and (min-width: 768px) {
.sidebar {
float: left;
width: 250px;
}
.content {
width: 100%;
}
.sub-header,
.wrapper {
width: 100%;
max-width: 1200px;
margin: auto;
background: red;
}
.sub-header {
text-align: left;
}
}
4 Answers
Samuel Lopez
Front End Web Development Techdegree Student 13,960 PointsI would put the .wrapper class before all the classes. Also delete .wrapper { width: 100%; }
glenn romaniuk
33,659 Pointsi'll re-explain i want the grey bar at the top to span the entire browser width 100% is wan the sub-header within the header to only display up to 1200px width max this was working but since I added the table to the header to make centering it easy it broke why?
Samuel Lopez
Front End Web Development Techdegree Student 13,960 PointsDo you have a link to the website? I am visual guy, sorry!
glenn romaniuk
33,659 Pointscopy and paste the html/css code above into a file and run it