html - 如何正确定位导航栏

Question

如何在不使用边距和填充的情况下，将品牌略微向右移动并将关于投资组合和联系人移动到右侧，并在右侧留出一些空间？像这里做的事情 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>