Responsiveness of text at the right side of screen

https://share.vidyard.com/watch/s5W1DPzS4187hpY4t9iPSz?
https://codepen.io/Antony-Collin/pen/WNYejKZ

As you can see in the vidyard, I'm trying to fix the responsiveness of the text at the top right corner of the screen, it's a flexbox with a tags in it, made it align-items: end; so that it displays at the right side of the header. I could easily fix it by putting media queries at breakpoints but I have no idea if it's good pratice, I feel like there's a better way to make the text resize normally. I have no idea what to do.

Vidyard

Vidyard Recording

Vidyard video

CodePenAntony Collin

WNYejKZ

...

Kevin Powell•6/6/23, 4:47 PM

Right now, you have a to move it over.
75% gets smaller as the screen gets smaller, but the size of the nav doesn't, so it runs out of space.

I would remove the margin and positioning on the and add

KKevin Powell Right now, you have a `margin-left` to move it over. 75% gets smaller as the scr...

QuEEbOP•6/6/23, 4:57 PM

it now works as intended, thank you so much ! but now if you don't mind, another problem is that at a moment some text will go underneath to get more space, what would you recommend to do in situations like this ? Should I just reduce the font-size with a media query breakpoint ? btw if you see this message, I began your course on responsiveness, it helped me a lot and I love your videos keep up the work, you definitely made css less scarier for me

Kevin Powell•6/6/23, 5:28 PM

You could reduce the font-size, or add to the header along with the rest

QuEEbOP•6/6/23, 5:39 PM

you're the goat.

KKevin Powell You could reduce the font-size, or add `flex-wrap: wrap` to the header along wit...

QuEEbOP•6/6/23, 6:47 PM

if you wanted an update, I've even removed the height from my header and put padding instead so that the header is the size i want. so no weird problems when the text splits. I guess it's better this way.