如何正确space和定位导航栏

Question

如何在不使用边距和填充的情况下将品牌略微向右移动并将关于投资组合和联系人移动到右侧，将一些 space 向左移动到他们的右侧？像这里所做的事情 http://qlip.in/

<div class="navbar">
      <ul>
        <li id="brand"><a href="#">Brand</a></li>
        <li id="about"><a href="#">About</a></li>
        <li id="portfolio"><a href="#">Portfolio</a></li>
        <li id="contact"><a href="#">Contact</a></li>
      </ul>
    </div>



*{
  margin:0;
  padding:0;
}
.navbar{  
  top:0;
  position:fixed;
  width:100%;
  background-color:rgb(114, 40, 114);
}
ul{
  list-style:none;
  display:flex;
  flex-flow: row nowrap;
  background-color:rgb(114, 40, 114);
  height:80px;
  justify-content:space-between;
  align-items:center;
}

ul #brand{  
  text-align:center;


}

ul #about{

}
ul #portfolio{

}

ul #contact{

}

ul li a:hover,
ul li a:focus{
  text-decoration:none;
  color:white;
}

Answer 1

使用width: calc(100% - 50px);margin: 0 auto;

*{
  margin:0;
  padding:0;
}
.navbar{  
  top:0;
  position:fixed;
  width:100%;
  background-color:rgb(114, 40, 114);
}
ul{
  list-style:none;
  display:flex;
  flex-flow: row nowrap;
  background-color:rgb(114, 40, 114);
  height:80px;
  justify-content:space-between;
  align-items:center;
  width: calc(100% - 50px);             /*  added property  */
  margin: 0 auto;                       /*  added property  */
}

ul #brand{  
  text-align:center;
}

ul #about{

}
ul #portfolio{

}
ul #contact{

}

ul li a:hover,
ul li a:focus{
  text-decoration:none;
  color:white;
}

<div class="navbar">
      <ul>
        <li id="brand"><a href="#">Brand</a></li>
        <li id="about"><a href="#">About</a></li>
        <li id="portfolio"><a href="#">Portfolio</a></li>
        <li id="contact"><a href="#">Contact</a></li>
      </ul>
    </div>

如何正确space和定位导航栏

How to properly space and position navigation bar

html

css

navbar

flexbox