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
Alex Weinberg
2,726 PointsUnwanted space to the right of nav.
There's a huge gap to the right of my nav. I tried to do: nav li { width: 20%}, seeing how there are 5 buttons, they would take up equal space in the parent container, but it pushes one of the buttons down and there still seems to be plenty of space for the button to fit. I made the percentage smaller and they all fit on the same line, but there is still a bunch of empty space to the right. I can't figure out what's taking up that space.
http://port-80-6zs79br0i9.treehouse-app.com
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Fresh Track | Synth driven dance/funk/rock music</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
</head>
<body id="body">
<header>
<img src="img/freshtrackalex1.jpg" alt"freshtracklogo" id="freshtracklogo">
<p class="navbutton"><a href="#main-nav" id="access_nav" class="access_aid">Skip to navigation</a></p>
<nav id="main-nav">
<ul class="nav">
<li><a href="index.html" class="selected">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="media.html">Media</a></li>
<li><a href="dates.html">Dates</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<p class="navbutton"><a href="#body" id="access_top" class="access_aid">Skip to top</a></p>
</nav>
</header>
<hr>
<div id="wrapper">
<section>
<img src="img/freshtrackalex4.jpg" id="homeimage">
</section>
<footer>
<a href="https://www.facebook.com/freshtracktothebrain/?ref=aymt_homepage_panel">
<img src="img/facebookicon.png" alt"Facebook Logo" class="social-icon">
</a>
<a href="https://www.instagram.com/freshtrackmusic/">
<img src="img/instagramicon.png" alt"Instagram Logo" class="social-icon">
</a>
<a href="https://www.youtube.com/watch?v=9Ii3NoOhZDQ">
<img src="img/youtubeicon.png" alt"Youtube Logo" class="social-icon">
</a>
<p>© 2016 Fresh Track.</p>
</footer>
</div>
</body>
</html>
/************************************* General *************************************/
body { font-family: 'Open sans', sans-serif; }
a { text-decoration: none; }
img { max-width: 100%; }
wrapper {
max-width: 940px; margin: 50px 0 auto; padding: 0 5%; clear: both; }
/************************************* Header *************************************/
header { width: 100%; margin: 0; padding: 0; }
/Logo/
freshtracklogo {
margin: 0 20px 0 0; width: 100px; height: 70px; display: none; }
hr { display: none; }
/************************************* Nav *************************************/
nav { display: none; width: 99%; margin: 0 0 30px 0; padding: 0; }
nav ul { width: 100%; margin: 0; padding: 0 }
nav li { padding-top: 10px; text-align: center; height: 30px; width: 100%; margin: 0; border-style: solid; border-width: 3px; border-color: #21759b; background: #464646; }
nav ul li a { font-size: 1em; display: inline-block; padding: 0 100px; font-weight: 800; color: #21759b; }
/nav display/hide/
main-nav:target {
display: block;
}
/Nav buttons/ .access_aid { display: block; position: absolute; top: 0; left: 0; width: 40px; height: 0; padding-top: 40px; overflow: hidden; border: 1px solid #ccc; background: #21759b 10px 10px / 20px 20px no-repeat; }
access_nav {
background-image: -webkit-repeating-linear-gradient(#ccc, #ccc 2px, #fff 2px, #fff 4px);
background-image: repeating-linear-gradient(#ccc, #ccc 2px, #fff 2px, #fff 4px);
}
access_top {
background-image: linear-gradient(45deg, transparent 13px, #ccc 13px, #ccc 15px, transparent 0), linear-gradient(-45deg, white 13px, #ccc 13px, #ccc 15px, white 0);
}
/************************************* Home page *************************************/
homeimage {
display: block; margin: 0 auto; }
/************************************* Footer *************************************/
footer { padding-top: 50px; text-align: center; clear: both; display: block; }
.social-icon { width: 30px; height: 30px; margin: 0 5px; }
@media screen and (min-width: 400px) {
}
@media screen and (min-width: 660px) {
/* hide nav buttons*/ .access_aid { display: none; }
.navbutton { display: none; }
/* logo appear*/ #freshtracklogo { display: inline-block; float: left; }
/* reset nav collapse*/ #main-nav { display: block; }
/* NAV*/ nav { display: inline-block; width: 100%; margin: 0; }
nav li {
width: 14%;
height: 22px;
display: inline-block;
padding: 5px 0;
margin-top: 33px;
text-align: cnter;
}
nav ul li a { padding: 0; text-align: center; }
7 Answers
Kai Nightmode
37,045 PointsAll done. Download the updated CSS from http://forestmist.org/share/treehouse/forum/fresh-track-css-tweaks.zip and give it a whirl.
There are lots of comments in the CSS but feel free to poke things and change values to get a better understanding of why something is working.
Keep in mind that the changes I made are just one solution. With CSS there are typically many solutions to any given design problem. ^_^
Kai Nightmode
37,045 PointsAhh, try setting the CSS box-sizing property to "border-box" with the following selector.
* {
box-sizing: border-box;
}
The asterisk above will apply to all elements. Feel free to change it to specific elements if you wish.
The border-box setting tells the browser to include padding and border dimensions as part of the total size of an element. This means a list item set to 20% width will be exactly 20% wide. This is different than the default box-sizing formula "content-box" which adds padding and border sizes after setting the content area to 20% wide.
Pretty sure this is exactly what will fix the issue but please let me know if it doesn't.
Cheers! ^_^
P.S. - For even more info, check out the box-sizing article on the Mozilla Developer Network.
Alex Weinberg
2,726 PointsThanks, but that's not exactly what I was getting at. If you look at the preview of my markup when the window is desktop browser size, there is a large gap in between the nav and the right edge of the browser window. I'd like to close that gap somehow so the nav ends up flush with the right side of the screen.
Kai Nightmode
37,045 PointsAh sorry. I can not see your code directly at http://port-80-6zs79br0i9.treehouse-app.com since that is only for you.
Can you update your original question with the format...
```
// code here
```
...and then I can easily copy/paste the HTML and CSS into my local computer to troubleshoot.
A zip file with everything in it would be even better if you have a service you can share files with (like Dropbox).
Alex Weinberg
2,726 PointsI can dropbox you a zip file. What is your email address associated with Dropbox?
Kai Nightmode
37,045 PointsMy Dropbox email is dropbox2 (at) forestmist.org
Alex Weinberg
2,726 PointsK just added you to a dropbox folder.
Alex Weinberg
2,726 PointsCome to think of it, there seems to be more space on the right side of the whole page than I really want. All of my body looks off center when the browser is at full width. No idea what to do.
Alex Weinberg
2,726 PointsNevermind, figured out the body, but still not sure about the nav.
Alex Weinberg
2,726 PointsWow that looks so much better in a lot of ways! Was there one specific thing you did that made it flush with the right side of the browser? I'm stumped as to why mine was like that.
Kai Nightmode
37,045 PointsLot of changes but the most important one was probably changing the UL inside the NAV to not be defined as 100% width. Oh and setting that same UL to have some margin-left to allow space for that logo image in the upper left.
Very glad you like it. :D