Fixing a discrepancy between chrome and firefox

No, it is still using the magic numbers negative margin. You are attemting to hide the whitespace nodes that your HTML formatting has created. Your inputs are basically inline-blocks and when they are on their own line in the HTML it creates a whitespace node.

If you want to know more about this then read through this old Sitepoint CSS Quiz.
Test Your CSS Skills Number 35 - inline-block

Here is your fiddle with a red line showing for me right when I land on the page. You may be trying to code for your devices but that don’t mean that everyone will see it the same as you. The when I zoom in the gaps jump around.

Here is the last code I posted using flex.

Additionally you can view this codepen and remove the node fix to see the whitespace nodes.

Remove these lines from .nav

.nav  {
    /*display:table;/* Remove this line*/
    /*width:100%;/* Remove this line*/

    text-align:center; 
   /*word-spacing:-1em; /* Remove this line*/

    margin:1em 0 0;
    padding:.25em 0;
    list-style:none;
    background:#000;
}
3 Likes