How do I move an element to the top right corner (of parent)?

Language Help CSS
1

Hi guys,

could someone help me get unstuck? :frowning:

So I’m trying to rebuild this website for practicing purposes. https://www.gamestar.de/

I did not come very far but I am furious about those green buttons:

https://www.codecademy.com/workspaces/62af0a66b0fe32e40094827a

Why won’t they stick in the top right corner using the following CSS-properties.

CSS

.container_buttons{
display: inline-block;
position: relative;
float: right;
width: 200px;
top: 0;
right: 0;
background-color: yellow;

HTML

<header>
  <div class="container_header">
    <img id="logo_main" src="upload://ahtafAjB083gchwN7dGazzRrRxG.svg" alt="Gamestar-Logo mit Farben der Pride-Flag">
    <form id="searchbar">
      <input type="text">
    </form>
    <div class="container_buttons">
      <button class="button_header">
        <img src="upload://uLUVctCFrWnMZJNczCi7AcijPjW.svg" alt="Plus-Logo">
      </button>
      <button class="button_header">
        <img src="upload://tZvFhVyrYgDu7ldzo29vYrp7rVe.svg" alt="Shop-Logo">
      </button>
    </div>
  </div>
</header>

Isn’t this how it ususally works? Combining “positiion: relative” with top- and right-properties? :o:

Thanks a lot!

2

You may need to use
position: absolute;
to position the element relative to a positioned parent or ancestor (or relative to the page if there’s no positioned ancestor)