user2604185 user2604185 - 6 months ago 6
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: https://www.dropbox.com/s/3z86dugdw5q9ezd/test.png . 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

You need to declare this for the .menu_bar_item:

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

http://jsfiddle.net/teddyrised/eWNSz/1/

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.

Comments