I am working on adding a menu to a map. The menu is working fine except I noticed there is always a padding to the left no matter what CSS applied to the menu. The padding seems to be originated from (-webkit-padding-start: 40px;) and it does not want to go away. I tried to override it with 0 !important;
that didn't do anything.
After Googling found this:
-webkit-padding-start: 40px; What it should be for IE and Firefox?
However could not find anything else on how to override or make this go away. I need to have items in the menu all the way to the left.
Attached is a screenshot, green area is what I am talking about and under styles you can see -webkit-padding-start: 40px;
It's because of the user-agent stylesheets of every browser. You should always reset all attributes in your css as your first step.
Short solution:
Longer solution:
http://meyerweb.com/eric/tools/css/reset/
for firefox: