Mattia Semprini Mattia Semprini - 1 year ago 66
CSS Question

CSS with border and margin issue

hello guys i'm trying to add some space between boxes in my list when resize the page, i'm new with css, help me :D
my problem



nav{
border: solid;
border-color: black;
}
ul li
{
margin-bottom: 11px;
display: inline;
font-weight: 900;
border: solid;
border-color: black;

}
nav ul li{
color: black;
text-decoration: none;
padding: auto;
padding-right: 80px;
padding-left: 80px;
}

<nav>
<ul>
<li>List</li>
<li>Contact Us</li>
<li>Shopping Cart</li>
<li>Login</li>
</ul>
</nav>




Answer Source

nav{
  border: solid;
    border-color: black;
}
ul li
{
    margin-bottom: 11px;
    display: inline;
    font-weight: 900;
    border: solid;
    border-color: black;
    display:inline-block;
}
nav ul li{
    color: black;
    text-decoration: none;
    padding: auto;
    padding-right: 80px;
    padding-left: 80px;
}
<nav>
    <ul>
        <li>List</li>
        <li>Contact Us</li>
        <li>Shopping Cart</li>
        <li>Login</li>
    </ul>
</nav>

just add display:block to the li element