How do I move these buttons to the right side?

I'm building a website to both express myself with and learn HTML, I'm currently trying to make a window similar to that of the Windows XP window, though I can't seem to figure out how to get the buttons to go to the right side of the title bar. It keeps sticking to the text.

The desired behavior I want is to go to the right side of the title bar.

What it looks like at the current moment. https://alex-mitch.neocities.org/ is the site that I'm working on, should at least give y'all a look into how my code is, I do admit that I did copy paste from some other websites but I at least understand what they do and how they function.

tried adding the float style to the buttons with the right parameter but that doesn't seem to work.

I'm new to all of this, just started doing all of this 2 days ago.

Solution

HTML tags have meaning. Use the appropriate tags / elements. In your case, for example, you should have a <header> instead of a <div class=title-bar>.

See here for a quick reference https://ronnieroyston.com/tools/html-element-reference.html

In any case, update your CSS to include this to achieve what you asked for:

.title-bar-controls {
    float: right;
    flex-direction: row;
    display: flex;
    flex: 1 1 auto;
    justify-content: flex-end;