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
kalle oman
1,178 PointsNav bar dosen't reach all the way
So my nav bar is not filling up the sides and the top to the logo how can i fix this?
My code:
/*************************** GENERAL ****************************/
body { font-family: 'Open Sans', sans-serif; }
wrapper {
max-width: 940px; margin: 0 auto; padding: 0 5%; }
a { text-decoration: none; }
/*************************** HEADER ****************************/
logo {
text-align: center; margin: 0; }
h1 { font-family: 'Changa One', sans-serif; margin: 15px 0; font-size: 1.75m; font-weight: normal; line-height: 0.8em; }
h2 { font-size: 0.75em; margin: -59x 0 0; font-weight: normal; }
/*************************** NAVIGATION ****************************/
nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }
/*************************** FOOTER ****************************/
footer { font-size: 0.75em; text-align: center; padding-top: 50px; color: #ccc; }
/*************************** COLORS ****************************/
/* Site Body */ body { background-color: #fff; color: #999; }
/* Black Header */ header { background: #1c1c1f; border-color: #1c1c1f; }
/* Nav Background On Mobile */ nav { background: #1c1c1f;
}
/* Logo Text */ h1, h2 { color: #ffffff; }
/* Links */ a { color: #ffffff; }
/* Nav Link */ nav a, nav a:visited { color: #ffffff; }
/* Selected Nav Link */ nav a.selected, nav a:hover { color: tomato; }
3 Answers
Belve Marks
7,332 PointsCould you link or insert both your files? Bracket the code with three back ticks to make it readable. Check out the navbar's styling. You're giving it 20px on top....
kalle oman
1,178 Pointshtml:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Portfolio</title>
<link rel="stylesheet" href="css/normalize.css">
<link href="https://fonts.googleapis.com/css?family=Changa+One|Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Poor Man's</h1>
<h2>Drink</h2>
</a>
</header>
<div id="wrapper">
<nav>
<ul>
<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>
</nav>
<section>
<ul id="gallery">
<li>
<a href="img/numbers-01.jpg">
<img src="img/numbers-01.jpg" alt="">
</a>
</li>
<li>
<a href="img/numbers-02.jpg">
<img src="img/numbers-02.jpg" alt="">
</a>
</li>
<li>
<a href="img/numbers-06.jpg">
<img src="img/numbers-06.jpg" alt="">
</a>
</li>
<li>
<a href="img/numvers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
</a>
</li>
<li>
<a href="numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="">
</a>
</li>
</ul>
</section>
<footer>
<ul>
<li>
<a href="https://www.facebook.com/">
<img src="img/facebook-wrap.png" alt="">
</a>
</li>
<li>
<a href="https://twitter.com/">
<img src="img/twitter-wrap.png" alt="">
</a>
</li>
</ul>
<small>© Poor Man's Drink 2016</small>
</footer>
</div>
</body>
</html>
css:
/***************************
GENERAL
****************************/
body {
font-family: 'Open Sans', sans-serif;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
}
/***************************
HEADER
****************************/
#logo {
text-align: center;
margin: 0;
}
h1 {
font-family: 'Changa One', sans-serif;
margin: 15px 0;
font-size: 1.75m;
font-weight: normal;
line-height: 0.8em;
}
h2 {
font-size: 0.75em;
margin: -59x 0 0;
font-weight: normal;
}
/***************************
NAVIGATION
****************************/
nav {
text-align: center;
padding: 10px 0;
margin: 20px 0 0;
}
/***************************
FOOTER
****************************/
footer {
font-size: 0.75em;
text-align: center;
padding-top: 50px;
color: #ccc;
}
/***************************
PORTFOLIO
****************************/
#gallery {
margin: 0;
padding: 0;
list-style: none;
}
#gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
/***************************
COLORS
****************************/
/* Site Body */
body {
background-color: #fff;
color: #999;
}
/* Black Header */
header {
background: #1c1c1f;
border-color: #1c1c1f;
}
/* Nav Background On Mobile */
nav {
background: #1c1c1f;
}
/* Logo Text */
h1, h2 {
color: #ffffff;
}
/* Links */
a {
color: #ffffff;
}
/* Nav Link */
nav a, nav a:visited {
color: #ffffff;
}
/* Selected Nav Link */
nav a.selected, nav a:hover {
color: tomato;
}
Belve Marks
7,332 PointsCheck out the parent's styling too. The navbar is inside the wrapper, thus is inheriting the wrappers styling. Specifically, the wrapper is binding everything within it to a specific width. Guil covers how to make these look good in one of the CSS videos.
In the meantime, you can always play around with the developer tools (ctrl+shift+i on windows chrome).
kalle oman
1,178 PointsI have seen that CSS Video about how to fix it and it didn't work so i downloaded the project files and took his code and still the same problem.