Extra space next to menu? - html

Question

I have a menu that spans across the page. I have its wrapper set to 100% and correctly, it spans completely across its container. I have for menu items set at 25% each however, there is around 20px space to the left of the menu revealing the background color. Regardless of sizes and margin:0 auto, the space remains.
.center{
margin:0 auto;
width:100%;
height:100%;
background-color:#3c87bc;
padding:0;
}
#top_forums_menu{
width:100%;
height:24px;
background-color:#5dbcff;
position:relative;
}
ul#top_forums_menu_bars {
list-style-type: none;
margin:0 auto;
}
ul#top_forums_menu_bars li {
float: left;
width:25%;
height: 100%;
overflow:hidden;
-webkit-box-shadow: 0 6px 2px -4px black;
-moz-box-shadow: 0 6px 2px -4px black;
box-shadow: 0 6px 2px -4px black;
transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
-webkit-transition: all .25s ease-in-out;
}
ul#top_forums_menu_bars li:hover{
border-bottom:5px solid #3a5871;
}
ul#top_forums_menu_bars li a{
display: inline-block;
width: 100%;
height: 100%;
opacity:1;
text-decoration:none;
transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-webkit-transition: opacity .5s ease-in-out;
line-height:10px;
padding-top:7px;
text-align:center;
font-family: Tahoma, Verdana, Segoe, sans-serif;
font-size:12px;
color:white;
}
ul#top_forums_menu_bars li a:hover {
opacity:.8;
}
<div id='top_forums_menu'>
<div class='center'>
<ul id='top_forums_menu_bars'>
<li><a href='' style='background-color:#5dbcff;'>Profile</a></li>
<li><a href='' style='background-color:#5dbcff;'>Account Settings</a></li>
<li><a href='' style='background-color:#5dbcff;'>My Content</a></li>
<li><a href='' style='background-color:#5dbcff;'>MyOACH</a></li>
</ul>
</div>
</div>

Answer 1

<ul> has a default padding which can be removed with the following rule:
ul#top_forums_menu_bars
{
padding-left: 0;
}

Answer 2

Just remove the left-padding
ul#top_forums_menu_bars {
list-style-type: none;
margin: 0 auto;
padding-left: 0;
}
https://jsfiddle.net/36ywxtyk/4/

Answer 3

The problem is that <ul> elements (along with <menu> and <dir> elements have a built-in browser rendering of padding-start: 40px. This is what is causing the offset that you see.
The easiest way to resolve this is to explicitly give your ul#top_forums_menu_bars a padding of 0, as can be seen in the following:
.center {
margin: 0 auto;
width: 100%;
height: 100%;
background-color: #3c87bc;
padding: 0;
}
#top_forums_menu {
width: 100%;
height: 24px;
background-color: #5dbcff;
position: relative;
}
ul#top_forums_menu_bars {
list-style-type: none;
margin: 0 auto;
padding: 0;
}
ul#top_forums_menu_bars li {
float: left;
width: 25%;
height: 100%;
overflow: hidden;
-webkit-box-shadow: 0 6px 2px -4px black;
-moz-box-shadow: 0 6px 2px -4px black;
box-shadow: 0 6px 2px -4px black;
transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
-webkit-transition: all .25s ease-in-out;
}
ul#top_forums_menu_bars li:hover {
border-bottom: 5px solid #3a5871;
}
ul#top_forums_menu_bars li a {
display: inline-block;
width: 100%;
height: 100%;
opacity: 1;
text-decoration: none;
transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-webkit-transition: opacity .5s ease-in-out;
line-height: 10px;
padding-top: 7px;
text-align: center;
font-family: Tahoma, Verdana, Segoe, sans-serif;
font-size: 12px;
color: white;
}
ul#top_forums_menu_bars li a:hover {
opacity: .8;
}
<div id='top_forums_menu'>
<div class='center'>
<ul id='top_forums_menu_bars'>
<li><a href='' style='background-color:#5dbcff;'>Profile</a></li>
<li><a href='' style='background-color:#5dbcff;'>Account Settings</a></li>
<li><a href='' style='background-color:#5dbcff;'>My Content</a></li>
<li><a href='' style='background-color:#5dbcff;'>MyOACH</a></li>
</ul>
</div>
</div>
Alternatively, you could apply a global low-specificity rule of:
* {
margin: 0;
padding: 0;
}
This will override all of the browser padding / margin quirks, while still having a low enough specificity for any individual selectors to override these rules.