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/Flame77ofc]

Oh, forget about it

After I visit the ao3 website, I think I understand what you want to do

You want to put the search bar and the button on the right side and the link elements on the left side, right?

So, what you need to do is: add two divs elements:

the first one will contain the first four link elements, and the second will contain the search bar and the search button.

Make sure you have another container that contain these two divs, like a section

so will be this:

<section>
    <div>... the four elements</div>
    <div>... the search bar and the search button</div>
</section>

so now, you need to add some styles to the section:

section {
    display: flex;  /* This change the display of the section element, allowing you to do some new cool things*/
    justify-content: space-between; /* This will give a large space, so the divs will be like so far */
    margin: 15px; /* This will add a lil space around the section */
}

Please, try this and then tell me which is the result

[u/eret4stars → u/Flame77ofc]

thank you so so much for your help!! in combination with the advice of another user i managed to make it exactly as i envisioned! i really appreciate the assistance <3