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 PointsHow do I get my nav li items to fit to browser width?
So I finally figured out how to get my nav menu to collapse and extend, but I'm having trouble getting the nav li buttons to fit to the browser width. They are always just a tiny bit over which causes there to be a scroll at the bottom. Any suggestions? Thank you.
http://port-80-6zs79br0i9.treehouse-app.com/#body
<!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">
</head>
<body id="body">
<header>
<p><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><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%; }
/************************************* Header *************************************/
header { width: 100%; margin: 0; padding: 0; }
.logo { margin: 0; width: 20%; }
/Logo/
freshtracklogo {
margin: 0 20px 0 0; width: 200px; height: 150px; float: left; display: none; }
/************************************* Nav *************************************/
/Nav/ nav { display: none; width: 100%; 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);
}
hr { display: none; }
/************************************* Home page *************************************/
homeimage {
display: block; margin: 0 auto; }
/************************************* Footer *************************************/
footer { clear: both; }
2 Answers
Steven Parker
243,656 PointsIt fit just fine for me (I tried it with Chrome), and tracked window size changes. But just in general, when things are just "a little too wide", it's usually because a border, padding, or margin was not accounted for in the overall layout.
Using border-box for box-sizing can help, but even that doesn't encompass margins (makes me wonder why they didn't also include "margin-box" as a setting).
This is a situation where familiarity with Chrome Dev Tools can come in handy.
Alex Weinberg
2,726 PointsGreat! Thank you. It was the box border.