How to fix different browsers changing my div width? - html

Question

This is normally a question I don't need answered, however, I am baffled. I have tried everything I can think of.
This picture includes a gray piece at the right. That is the scroll bar, figured I would include it. This is on Google Chrome and how I want it.
And this is how Microsoft Edge does it.
I narrowed the problem down to my list items <li>. On Google Chrome (according to my resolutions), the width of <li> is 226.141px and on Microsoft Edge, using the same exact CSS, the width of <li> is 226.35px.
Here is my style.css:
div.menuContainer {
width:100%;
height:48px;
}
ul.menuItems {
/*margin:-12px;*/
}
li.menuItem {
display:inline-block;
box-sizing:border-box;
width:calc(100% / 7);
float:left;
text-align:center;
height:48px;
font-weight:bold;
background-color:#DD4400;
color:#454545;
padding:12px 0;
overflow:hidden !important;
}
li.menuItem:hover {
background-color:#454545;
color:#DD4400;
}
li.menuItem a {
color:#454545;
}
li.menuItem a:hover {
color:#DD4400;
}
Here is my menu:
<div class="menuContainer">
<ul class="menuItems">
<a href="/videos.php">
<li class="menuItem">
Videos
</li>
</a>
<a href="/playlists.php">
<li class="menuItem">
Playlists
</li>
</a>
<a href="/categories.php">
<li class="menuItem">
Categories
</li>
</a>
<a href="/actors.php">
<li class="menuItem">
Actors
</li>
</a>
<a href="/photos.php">
<li class="menuItem">
Photos
</li>
</a>
<?php if($logged_in == 0) { ?>
<a href="/login.php">
<li class="menuItem">
Login
</li>
</a>
<a href="/register.php">
<li class="menuItem">
Register
</li>
</a>
<?php }
else { ?>
<a href="/logout.php">
<li class="menuItem">
Logout
</li>
</a>
<a href="/account.php">
<li class="menuItem">
My Account
</li>
</a>
<?php }
?>
</ul>
</div>
Any help you can provide would be greatly appreciated. Thank You.

Answer 1

Here's a different way of approaching the same problem using flexbox. I also made some slight modifications to your HTML. The key to this approach is using display: flex on the container and flex-grow: 1 on the children of that container. Note: I also use display: flex to achieve vertical and horizontal centering on the <a> elements, rather than having to use top and bottom padding.
.menu {
height: 48px;
display: flex;
}
.menu a {
flex-grow: 1;
display: flex;
font-weight: bold;
background-color: #DD4400;
color: #454545;
align-items: center;
justify-content: center;
text-decoration: none;
}
.menu a:hover {
text-decoration: underline;
}
<div class="menu">
Videos
Playlists
Categories
Actors
Photos
Logout
My Account
</div>
Here's a quick article explaining what flexbox can do for you - css-tricks.com/snippets/css/a-guide-to-flexbox. I'd highly recommend adding this to your toolkit - it's relatively modern, but has very good browser support caniuse.com/#feat=flexbox. I use it very regularly.

Answer 2

Do a reset in your css, as a first thing:
* {
/* So 100% means 100% */
box-sizing: border-box;
}
See link for details.