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
melissa brown
4,670 Pointswhy do i have to add a margin -40px?
hi my navigation had a gap on the right hand side. i got rid of it by putting a margin-left: -40px. which got rid of it but i still dont understand why it was there is the first place? all the other elements covered the whole page
<!doctype>
<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css">
<head>
<title></title>
</head>
<body>
<div class="main-wrapper">
<header class="main-header">
<h1 class="main-logo"><a href="#">Logo</a></h1>
<ul class="main-nav">
<li><a href="index.html"class="selected">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</header>
<div>
<h2>hello </h2>
</div>
</div>
</body>
</html>
/* page styles */
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
h1 {
position: relative;
text-align: left;
}
h2 {
position: relative;
text-align: left;
}
/* Layout Element Colors
================================ */
.main-header { background-color: #384047; }
.main-logo { background-color: #5fcf80; }
.main-nav li { background-color: #3f8abf; }
/*main layout */
.main-wrapper {
width: 900px;
height: 600px;
margin: auto;
background: #FF8C69;
color: white;
}
/* navigation */
.main-nav,
.main-logo,
.main-nav li {
display: inline-block;
width: 100%;
}
.main-nav {
margin-left: -40px;
}
/* nav link*/
nav a, nav a:visited {
color: #fff;
}
/* selected nav link*/
nav a.selected, nav a:hover {
color: #32673f;
}
4 Answers
Chris Shaw
26,676 PointsHi Melissa,
This is happening because of the default styles which all browsers have built into them, to get rid of these styles so they're consistent we can use a reset stylesheet. The most common and most up-to-date reset stylesheet available is normalize which provides the best cross browser experience.
To use this you simply need to add another stylesheet link in your HTML so it sits before your main stylesheet, this is important as your styles should override the normalize styles, if it comes after your main stylesheet your styles will be overridden which isn't what we want.
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
Once you've done that you can remove your negative margin.
Happy coding!
Philip Gales
15,193 PointsIf you look at your normalize.css or the default for the browser you are using, it will have padding on the left.
Assuming you are following along with the tutorial, normalize.css on line 306 has the following:
menu,
ol,
ul {
padding: 0 0 0 40px;
}
To offset this padding, either keep your negative margin, or take advantage of the cascading nature of css and simply add the following to your main.css:
menu,
ol,
ul {
padding: 0;
}
melissa brown
4,670 Pointsawesome thanks. just a quick question i noticed you linked the normalize.css with href="http:// instead of downloading it and putting into a text editor is there any benefit /disadvantage doing it this way?
thanks
Stephen Bolton
Front End Web Development Techdegree Student 7,933 PointsI could be wrong on this, but I do believe that in this small situation it would be fine. In larger applications you don't want to make http requests to too many outside servers which could slow down load times. Again I might be wrong on that.
Olga Mendenhall
8,809 PointsThank you, Philip! :) Helped a lot!