1) Пытаюсь сверстать navbar на flexbox, на float-ах было бы проще сделать то, что я хочу, но стараюсь всё делать именно на flexbox. Так вот, вопрос: можно ли как-то переместить отдельный элемент в правый угол его контейнера? Но сделать это на flexbox и при этом дополнительно его ни во что не оборачивать. Здесь мне нужно элемент "item" переместить вправо, в конец. И да, почему над "HOME" есть чёрные отступы, он должен быть на полную высоту.
2) Думал отодвинуть его на margin-left, но было бы правильно это делать, или если это сделать, и задать конкретное кол-во пикселей, то у разных мониторов будет выглядеть по-разному? И какими единицами измерения лучше пользоваться? Читал, что "px" лучше не надо.
.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()">☰</a></b>
</div>
</header>