Icon nav menu container too large…

[opafaf]

OK. I have a nav menu created out of icons that is not fitting into its container.
I am trying to center the nav menu on the page. When I put in what the width of the overall div is supposed to be (840px), I get this: http://imgur.com/bYEtLry
It bumps the last icon down to the next level.

So, I gradually make the box wider to accommodate for that and I get this: http://imgur.com/MIZxG7N

I put the tomato color in the BG so you can see what it is doing. It has like 40px of extra space on the left which makes it so the icon menu is not centered on the page.. It is odd and I have no idea what I am doing wrong.
Here is the div CSS:
#iconnav {
background-color: #F66;
height: 184px;
margin: 0 auto;
width: 840px;
display:block;
}

I can change it to “display:inline” and that will remove the extra space, but then it doesn’t center on the page.. any ideas?

[Paulie_D]

We’d really need to see the HTML & CSS in action.

Could you make a Codepen.io reduced case example?

[opafaf]

http://codepen.io/anon/pen/yIKgB
This work?

[Paulie_D]

As you can see…nope.

[Paulie_D]

…and allowed for whitespace?

[opafaf]

Here is a link to the code…
https://gist.github.com/anonymous/4538f92f51bbb303f930

[opafaf]

I actually figured it out..
I added this to it:

• {
  margin:0;
  padding:0;
  }

it worked.

[Author]

Posts