How can I make my webpage icon stay right? [duplicate] - html

Question

This question already has answers here:
How can I align one item right with flexbox?
(5 answers)
Closed 1 year ago.
I have made a navbar, and it is supposed to replace the links with a menu icon on the right when the webpage gets below 630px wide. The problem is, my icon doesn't stay right, it stays as far left as it can go, leaving space for the margins of the hidden links (the elements themselves are gone - I set them to display: none; - but the margins are still there). I am working with the w3 schools article about responsive navbars, but only using it for the appearing icon part.
I have tried to change he display of the icon to flex, and all sorts of justification and alignment, but nothing will work. When it is set to flex it's width goes to 0 and I cant make it get wider again.
I am trying to give only the relevant code, but there is a fair amount of stuff I didn't include so feel free to ask me for more or to specify something.
.navContainer {
position: sticky;
top: 0;
margin: 0;
background-color: #ffffff;
display: flex;
justify-content: left;
align-content: flex-start;
padding-left: 10px;
padding-top: 20px;
padding-bottom: 10px;
}
.navContainer li {
list-style: none;
margin-right: 40px;
}
.navContainer a {
text-decoration: none;
color: black;
font-family: Montserrat-Regular;
font-size: 20pt;
margin: 10px;
}
.navContainer .icon {
display: none;
margin: 0;
}
.navContainer .iconImg {
max-height: 40px;
max-width: 40px;
}
#media (max-width: 630px) {
.navContainer a:not(.logoContainer, .name) {
display: none;
}
.navContainer li.icon {
float: right;
display: block;
}
}
<ul class="navContainer">
<li class="logoContainer"><img href="TriTech-Home.html" class="logo" src="https://via.placeholder.com/80"></img>
</li>
<li>TriTech</li>
<li><a class="link1" href="#">xDesk</a></li>
<li><a class="link2" href="#">Saturn Bikes</a></li>
<li href="javascript:void(0);" class="icon" onclick="myFunction()">
<img class="iconImg" src="Menu-Bars.ico">
</li>
</ul>

Answer 1

Don't float things. That's an outdated method, especially with flexbox. Use auto left margin on the last item.
.navContainer {
position: sticky;
top: 0;
margin: 0;
background-color: #ffffff;
display: flex;
justify-content: left;
align-content: flex-start;
padding-left: 10px;
padding-top: 20px;
padding-bottom: 10px;
}
.navContainer li {
list-style: none;
margin-right: 40px;
}
.navContainer a {
text-decoration: none;
color: black;
font-family: Montserrat-Regular;
font-size: 20pt;
margin: 10px;
}
.navContainer .icon {
display: none;
margin: 0;
}
.navContainer .iconImg {
max-height: 40px;
max-width: 40px;
}
#media (max-width: 2630px) { /* increased for demo */
.navContainer a:not(.logoContainer, .name) {
display: none;
}
.navContainer li.icon {
display: inline-block;
margin-left: auto; /* <-------------------- HERE */
}
}
<ul class="navContainer">
<li class="logoContainer"><img href="TriTech-Home.html" class="logo" src="https://via.placeholder.com/80" />
</li>
<li>TriTech</li>
<li><a class="link1" href="#">xDesk</a></li>
<li><a class="link2" href="#">Saturn Bikes</a></li>
<li href="javascript:void(0);" class="icon" onclick="myFunction()">
<img class="iconImg" src="https://via.placeholder.com/40">
</li>
</ul>

Answer 2

This should work
.nav-container .icon{
width: 100%;
text-align: end;
}