1) I try to roll navbar on flexbox, on float it would be easier to do what I want, but I try to do everything on flexbox. So, the question is: is it possible to somehow move a single element to the right corner of its container? But to do it on flexbox and at the same time do not wrap it in any way. Here I need to move the item element to the right, to the end. And yes, why there are black indents over "HOME", it should be to its full height. enter image description here 2) I thought to move it to margin-left, but it would be right to do it, or if it was done, and set a specific number of pixels, then different monitors will look different? And what units is better to use? I read that "px" is better not necessary.

.header, .topnav { width: 100%; background-color: black; display: flex; align-items: center; } .topnav a:hover { background-color: #ddd; color: black; } .topnav a { font-size: 20px; color: white; padding: 10px; } #active { background-color: green; } .icon { display: none; } 
 <header class="header"> <div class="topnav"> <a href="#" class="hrefs" id="active">Home</a> <a href="#" class="hrefs">News</a> <a href="#" class="hrefs">Contacts</a> <a href="#" class="hrefs">About</a> <b><a href="javascript:void(0);" class="icon" onclick="openCity()">&#9776;</a></b> </div> </header>

    3 answers 3

    You can set the flex-grow property for the container framing the last item in the list and align the text to the right.

     .topnav { background-color: black; display: flex; padding-left: 0px; list-style: none; } li { color: white; padding: 10px; } li a { color: white; } .active { background-color: #5DB97D; } .menuBurger { flex-grow: 1; text-align: right; } 
     <ul class="topnav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">News</a></li> <li><a href="#">Contacts</a></li> <li><a href="#">About</a></li> <li class="menuBurger"><a href="#">menu</a></li> </ul>

    • At first it didn’t work, as you said, but then it turned out that the <b> tag prevented him from moving, I thought he didn’t solve anything, he just made the text fatter, and he appeared as a container for "icon". Thank you very much! - Andrew Yaremchuk
    • Small links :( - Qwertiy ♦

     .header, .topnav { width: 100%; background-color: black; display: flex; align-items: center; } .topnav a:hover { background-color: #ddd; color: black; } .topnav a { font-size: 20px; color: white; padding: 10px; } #active { background-color: green; } .topnav a:last-child { order: 2; } .topnav:before { content: ""; flex: 1 0 0px; order: 1; } 
     <header class="header"> <div class="topnav"> <a href="#" class="hrefs" id="active">Home</a> <a href="#" class="hrefs">News</a> <a href="#" class="hrefs">Contacts</a> <a href="#" class="hrefs">About</a> </div> </header>

      Yes, the margin on the left is just possible, just write margin-left: auto; As for the menu bar, you have all the items in the center, and the height of the HOME block does not stretch, but such as it is, or write align-self: stretch; either add paddings, or play around with the height.

      • one
        Thank you very much, it helped!) - Andrew Yaremchuk