네비게이션 바를 올바르게 배치하고 위치를 지정하는 방법

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>

을 수행