How to Remove Unwanted Padding or Margin?

Question

I wanted to using a flexible horizontal list menu, and I found one on github that came with a collapsing menu at a certain breakpoint. I didn't need the collapsing menu so I got rid of it. I've been modifying the menu to cater to my layout. There are a couple issues that I can't seem to figure out.

1. There seems to be a left margin to the menu that I want to get rid of.
2. On the right side of the menu, while shrinking the browser, the last menu item seems to get overlapped instead of pushed in.
3. I would like to reduce the margins between list items

Normally this wouldn't be a problem for me, but I've not really worked much in percentages.

 .flexnav {
    overflow: hidden;
    margin: 0 auto;
    width: 100%;
    max-height: 0;
}

FIDDLE

Answer 1

Add padding: 0; to .flexnav style definition.

Answer 2

To remove padding just use css:

padding:0;

You mention "unwanted", so a tip from what I usually do is, at the top of the style sheet I write this out:

*{
  padding:0px;
  margin:0px;
}

This will remove padding and margin from all things that have padding or margin by default, so you will no longer have "unwanted" padding or margin, instead you can separately add padding and margin to things you actually want.

I use this approach on all websites I make.