How can I make a symmetrical navbar?-CodePudding

I have this navbar:

There is too much space at the left and I want the same space at the left and at the right. I have this code:

 <!--html-->
         <nav>
           <ul>
            <li>Tutorials</li>
            <li>News</li>
           </ul>
          </nav>

/*css*/
nav{
background-color: rgb(255, 86, 86);
margin: auto;   
height: 50px;
padding: 10px;
width: fit-content;
margin: auto;
}
nav li{
    display: inline;
    padding: 10px;
}

CodePudding user response：

Looks like you're butting heads with the browser defaults.

It's common to reset the browser's default padding/margin for all elements to zero because some elements (like ul and li) can have some default margin/padding. Also, you didn't specify the list-style-type of the list to be none, which I assume means the unordered list defaults to bullets, a result you don't want.

Here's what I would personally do to accomplish what you're looking for, excluding colors:

* {
  margin: 0;
  padding: 0;
}

nav {
  padding: 10px;
}

nav ul {
  list-style-type: none;
  display: flex;
}

nav li {
  margin-right: 10px;
  flex-shrink: 0;
}
nav li:last-child {
  margin-right: 0;
}

This puts a 10px space around all of the items, and then a 10px space between each of them. It also forces the list to display horizontally without needing to inline the list items. The CSS Tricks guide to flex box might be helpful to you.

There's many right answers here, so try to have fun with it and pick the method that feels the best to you.