user2604185 user2604185 - 1 year ago 51
CSS Question

Menu bar leaves side space

I am trying to make a menu bar. The container is called: #menu and has the following CSS:

border: 0px;
margin: 0 auto;
position: relative;
display: inline-block;
width: 100%;

The problem is that when I set the width of the menubars to 12.5%, they leave space on the side. Sorry but I can't show the real contents so I'm giving this image: . The CSS for the menu_bars is:
width: 12.5%;
float: left;
padding: 25px 18px 25px 18px;
background: rgba(237, 157, 28, 0.992157);
font-weight: bold;
font-size: 15px;
text-align: center;
line-height: 15px;
height: 20px;

Answer Source

You need to declare this for the .menu_bar_item:

.menu_bar_item {
    box-sizing: border-box;
    /* more styles */

The box-sizing: border-box property prevents padding from adding onto the width (that is the default behavior, anyway). With this property declared, you will need to look into adjusting your height property, too.