Nav margin

Hi I have this margin space that is pushing my nav
and not centering it properly. I am not sure where it is coming from.
Viewed in the Mobile version of the website: Website

It is the green ox highlight space that I cannot seem to locate.

It’s actually padding, not a margin. Apply this to your .nav.navbar-nav element, to whichever media query you desire:

padding: 0;
2 Likes

oh yeah it was the auto padding of the ul! thanks.

No problem.

To avoid such issues in the future, I’d recommend using a CSS reset. Just pop this into the top of your stylesheet:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  list-style-type: none;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline; }

It eliminates pre-set styling on all markup elements, to avoid nasty surprises. :wink:

What do you do about all the form elements you just destroyed?

2 Likes

hmm not sure about this it may be to risky on some elements.

Lol this sounds funny :grin:

I agree.

Size of my website - #3 by ronpat

It’s why the universal selector reset was found to be in poor form many many years ago. I’m shell shocked people still are lazy and just target everything like that, rather than customizing it on a site-to-site basis.

3 Likes

yeah the universal selector should be more carefully thought out when
used.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.