Question

I am making a website’s top navigation. There is a margin bug with the menu.

I have defined margin / padding : 0 for list items as well as display: inline-block.

See the demo: http://tinkerbin.com/495Qb956

Basically I want to remove that left/right margin from the list items, and know why this margin is there.

Answer 1

By default display:inline-block take margin from left. Write like this:

.top-right ul {
    background:black;
    height:43px;
    font-size:0;
}
.top-right ul li {
    display:inline-block;
    border:1px solid red;
        margin:0;
        padding:0;
        font-size:13px;
}

Check this http://tinkerbin.com/YWeV7osy