Dean Hampson Dean Hampson - 5 months ago 11
HTML Question

Inline-block element drops to second line when padding is applied

As the title states, the inline-block list item element drops to the second line. How would I go about keeping them all both centered and on the same line? Thanks!
Below I've posted the full css code along with an image.

CSS:

body {
margin: 0;
}

nav {
position: fixed;
background-color: #000000;
width: 100%;
margin: 0;
}

nav .container {
display: table;
margin: 0 auto;
}

nav .container ul {
margin: 0;
}

nav .container ul li {
list-style: none;
color: #FFFFFF;
display: inline-block;
margin: 0;
padding: 0;
}

nav .container ul li:nth-child(1n+2) {
margin-left: 5%;
}


Image Here

Answer

If something is not clear feel free to ask me.

nav .container {
    display: block;
    text-align: center;
    padding: 5px;
}

Don't know but the underline bugs me a lot with a black background. If you want to remove it add this to the css. (but you probably know that)

a {
    text-decoration: none;
}