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

Hi guys,

could someone help me get unstuck? :frowning:

So I’m trying to rebuild this website for practicing purposes.

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

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


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


  <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">
    <div class="container_buttons">
      <button class="button_header">
        <img src="upload://uLUVctCFrWnMZJNczCi7AcijPjW.svg" alt="Plus-Logo">
      <button class="button_header">
        <img src="upload://tZvFhVyrYgDu7ldzo29vYrp7rVe.svg" alt="Shop-Logo">

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

Thanks a lot!

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)