I'm working on an HTML and CSS menu.
I'm trying to center the sub-menu relative to the main menu (ul.menu).
Why is there extra space appearing on the left side?
The styling for ul.menu li:hover ul already sets left: 0, and its closest parent is ul.menu. I can't figure out where this extra space is coming from.
https://i.sstatic.net/zHOKG.jpg
.menu-main-container { padding-bottom:52px; margin-top:-60px; margin:10px auto; }
ul.menu { z-index: 597; text-align:center; position: relative;background: gray; width: 960px; margin:auto!important;}
ul.menu li { display: inline-block; line-height: 2.1em; vertical-align: middle; zoom: 1; }
ul.menu a { display:block; letter-spacing:2px; color:#333; font-size:13px; text-decoration: none; padding:0 35px; text-transform:uppercase; font-weight:normal !important;}
ul.menu a:hover {background:#EFEFEF; color:#ad7f12}
ul.menu, ul.menu li, ul.menu ul { list-style: none; margin: 0; padding: 0; color:#333; }
ul.menu li:hover { position: relative; z-index:599; text-decoration:none; background:#EFEFEF; }
ul.menu li:hover ul {}
ul.menu ul { display: none; }
ul.menu ul li { float: none; line-height:34px; margin:0; padding:0; display: inline-block;}
ul.menu ul li a:hover{ }
ul.menu ul li { top: -2px; left: 100%; }
ul.menu li:hover ul { display:inline-block; position: absolute; top: 100%; left: 0; z-index: 598; width:1020px; background:red; }<div class="" ="menu-main-container">
<ul class="menu">
<li><a href="#">Menu 1</a>
<ul>
<li><a href="#">Menu 1 Submenu item 1</a></li>
<li><a href="#">Menu 1 Submenu item 2</a></li>
<li><a href="#">Menu 1 Submenu item 3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Menu 2 Submenu item 1</a></li>
<li><a href="#">Menu 2 Submenu item 2</a></li>
<li><a href="#">Menu 2 Submenu item 3</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a>
<ul>
<li><a href="#">Menu 3 Submenu item 1</a></li>
<li><a href="#">Menu 3 Submenu item 2</a></li>
<li><a href="#">Menu 3 Submenu item 3</a></li>
</ul>
</li>
</ul>
</div>