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
Karn Patel
3,291 PointsThe padding in Nav is making it so that the nav and the logo can't line up on the same line
On this section we make it so that on screens with a width of >= 660px the nav and logo are on the same line. However, using the dev tools on Chrome, it seems that the padding for nav is making it so that the nav object is too wide to fit on the same line as logo. I thought that padding doesn't change the size of the box if it doesn't have to. Can someone explain this to me?
Here's a snapshot of my workspace and me turning on/off the padding for the page: https://w.trhou.se/iq7pyl02l0
3 Answers
Brendan Whiting
Front End Web Development Techdegree Graduate 84,736 PointsI'm going to try and address one problem by being lazy and not watching the accompanying video. Let me know if you still need help....
You said "padding doesn't change the size of the box if it doesn't have to". This is not true - if you add padding/margins/border it DOES change the size of the box UNLESS you have "box-sizing: border-box" applied to your element. Only then will it smush the padding/margins/border into the size that you specify as the width/height of your element, otherwise it adds to it.
I played around in the console as well and it worked properly when I turned off "margin-right: 5%" that was applied to the nav element.
Scott LaPlant
356 PointsNot positive, but looks like the issue might be "display: block". Play with "display: inline-block" and see what happens then.
Karn Patel
3,291 PointsBrendan Whiting ^^ That seems to be the case here. Has that changed regarding padding in particular in the last 2 years? Because it works fine in the video. I fixed the problem by making the padding responsive by changing it from 10px to 1% and the margin of the logo from 5% to 3% (to make room for the padding).
Brendan Whiting
Front End Web Development Techdegree Graduate 84,736 PointsI don't know sorry. Another thing I do sometimes when trying to debug when following along with Treehouse is I download the Project Files, and then you can look at the code from the completed version, and sometimes I even go as far as comparing my code and their code in one of those online text comparison tools to see exactly any tiny discrepancies in the way I did things.