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
Cezary Burzykowski
18,291 PointsProblem with margin: 0 auto;
Hello there!
I'm working on responsive layout project and I've encountered a problem at the very begining. I've started with mobile device version (the problem occurs on the device width 320px). The problem i very simple, I can't center my navigation menu li and it drives me crazy...
Here is a snapshot of my workspace: https://w.trhou.se/oupjqlt5iv
Here is a link to my workspace: https://teamtreehouse.com/workspaces/20504802
I would be extremely glad if someone could help me
3 Answers
Craig Watson
27,930 PointsHi,
I am not sure if this is completely what you are looking for but to me you are suggesting the spacing on the left of the <ul>.
To remove this add the following:
.nav-menu {
padding-left: 0;
}
Let me know if you need more help Craig
Tomasz Chiossi
7,545 PointsI am not entirely sure what you are looking for but if you want to centre nav and margin: 0 auto does not work correctly add also display: table to this navigation to make container wrapping all nav item with no extra padding on sides.
Cezary Burzykowski
18,291 PointsThank you all for the help!
I've used Dev Tools provided by Chrome and applied padding-left:0 to my <ul> element and it worked :)
David Perkins
9,607 PointsDavid Perkins
9,607 PointsYour <ul> has a 40px padding on the left edge defined by the browser. In some of the tracks Treehouse teaches about reset rules (normalize, etc..) Have a read about these as they'll help level the playing field when it comes to browser rendering.
You could just set the <ul> in the css to have margin-left: 0; padding-left: 0; for a quick fix though.