Your code is not enough to give you a perfect solution. However, here is my shot:
I assume that the wrapper container <div> ... </div> you have spans 100% of the viewport width? If this is the case, you can add the following style attribute:
<div style="display: flex; justify-content: flex-end;">
<nav>
// rest of the HTML code in your example
</nav>
</div>
Of course, for a cleaner solution, instead of adding an inline style attribute, you can add a CSS class and style it in a separate stylesheet file or style tag in your document <head>:
<div class="nav-wrapper">
<nav>
// rest of the HTML code in your example
</nav>
</div>
and then in your CSS declarations
.navWrapper {
display: flex;
justify-content: flex-end;
}
Alternative solution
If you are okay with your navigation overlapping the rest of the page content, you can always position: fix it. This way it would be taken out of the document flow and overlayed on top of the other HTML elements on your page. Here is the CSS needed:
.nav-wrapper {
position: fixed;
top: 0px;
right: 0px;
z-index: 999; // <- increase this value if any elements are on top of your nav
}
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
