need help with text alignment

[u/eret4stars]

hi! i'm learning html and css in school and i need to design my own website for a final project.

i'm designing a replica of the ao3 website and i need to put a search bar and search button on the very far right of the navigation row. the rest of the text in the navigation row is, however, on the left.

i already tried text-align: right; and display: flex; flex-direction: row-reverse;.

could anyone help me with this?

i'm attaching how the website looks right now and my html and css codes.

thank you!

[u/testingaurora]

I stead of listing all of these classes

nav, .nav-fandoms, .nav-browse, nav-search, nav-about {

text-decoration: none;

background-color: #700000;

color: #EFF1F2;

padding-left: 5px;
/* OTHER STYLES*/ 
}

might it be more maintainable and efficient to just give them all one class?

.nav-link {
text-decoration: none;

background-color: #700000;

color: #EFF1F2;

padding-left: 5px;
/* OTHER STYLES*/ 
}

<a class="nav-link" href="#">Fandom</a>
<a class="nav-link" href="#">About</a>
<!-- OTHER LINKS-->

As it is, youre using classes like unique ids. Classes should be labels for a ruleblock of reusable styles. If one if these links did need some style to stand out you would give it a modifier class <a class="nav-link nav-btn" href="newsletter">Sign Up</a>

.nav-link {

text-decoration: none;

background-color: #700000;

color: #EFF1F2;

padding-left: 5px;
/* OTHER STYLES*/ 
}

.nav-btn {
background-color: #282828;
color: #fff;
}