Align a picture in a header using css

Question

I want to move a Picture in my websites header. It Should end up being in a line with the login and registration button (similiar to the stack overflow in the header - everything in line). I've been trying to solve this problem for hours, unfortunately nothing worked.

Header in html

<img src="/static/logo.png" alt="Start" class="header_logo" id="header_logo">

{% if session['loggedin'] %}

    <button  type="button" onclick="{{ url_for('logout') }}" class="header_logout">Logout</button>

{% else %}

    <button type="button" onclick="{{ url_for('login') }}" class="header_login">Einloggen</button>

    <button type="button" onclick="{{ url_for('register') }}"
    class="header_register">Registrieren</button>

{% endif %}

the css file

.header {
    position: fixed;
    top: 0;
    background-color: lightgrey;
    width: 100%;
    text-align: right;
    display: inline-block;
    font-size: 2vw;

}

.header_login {
    background: lightcoral;
    margin: 0;
    padding: 10px 10px;
    border-radius: 23px;
}

.header_register {
    background: lightblue;
    margin: 0;
    padding: 10px 10px;
    border-radius: 23px;
    margin-right: 1%;
    margin-bottom: 1%;
}

.header_logo{
    width: 10%;
    display: block;
    left: 0;

}

Here is how it is displayed

I'd be happy if someone could help me. :)

Answer 1

Have you tried using "float" in the css? I'm thinking that you could use the "float:right;" on the login/logout buttons.

Answer 2

in class .header_logo you specified display property with block value! display: block; takes the hole line, this is why your buttons are placed in the next line.
on the other hand it is better to use float for img and buttons
you can see some examples for display property here: https://www.w3schools.com/cssref/pr_class_display.asp

Answer 3

What about flex? Flexboxes are more reliable than floats.

.header {
  padding:1rem 0.2rem;
  display:flex;
  justify-content: flex-end;
  align-items:center;
  position: fixed;
  top: 0;
  background-color: lightgrey;
  width: 100%;
  text-align: right;
  font-size: 2vw;

}
.header .logo img {
  width:10rem;
}
.header .logo {
  margin-right: auto;
}
.header .interaction_buttons {
   display:flex;
}
.header .interaction_buttons button:first-child {
  margin-right:1rem;
}

.header_login {
    background: lightcoral;
    margin: 0;
    padding: 10px 10px;
    border-radius: 23px;
}

.header_register {
    background: lightblue;
    margin: 0;
    padding: 10px 10px;
    border-radius: 23px;
    margin-right: 1%;
    margin-bottom: 1%;
}

.header_logo{
    width: 10%;
    display: block;
    left: 0;

}

<div class="header">
  <div class="logo">
     <img src="https://bankingthefuture.com/wp-content/uploads/2019/04/dummylogo.jpg" alt="">
  </div>
  <div class="interaction_buttons">
     <button type="button" onclick="{{ url_for('login') }}" class="header_login">Einloggen</button>
    <button type="button" onclick="{{ url_for('register') }}"   class="header_register">Registrieren</button>
  </div>
</div