How to get elements inlined in the header? - html

Question

I'm working on creating a custom header. I'm not sure how to properly perfectly inline my elements in my header. For example, these elements should be where the red arrows are pointing:
How can I get these elements in the header, align them perfectly, and put them where the red arrows are pointing (picture above).
https://jsfiddle.net/af5caL8p/3/
body {
margin: 0;
}
.header {
height: 45px;
width: 100%;
background-color: royalblue;
color: white;
padding: 10px;
margin-top: auto;
margin-bottom: auto;
line-height: 11px;
display: inline-block;
}
button.signup {
background-color: #2FA034;
border-radius: 10px;
color: white;
font-size: 20px;
font-weight: 300;
}
/* Material style */
button {
border: none;
cursor: pointer;
color: black;
width: 130px;
padding: 10px;
border-radius: 2px;
font-size: 19px;
background: royalblue;
/* Ripple magic */
position: relative;
overflow: hidden;
}
<div class="header">
<h1>Logo</h1>
Link 1
<button class="signup">Signup</button>
<button class="signup">Login</button>
</div>

Answer 1

With display: flex. I updated your JS example: https://jsfiddle.net/af5caL8p/4

Answer 2

display: inline-block display simply makes elements with block/inline default properties use extra properties e.g a <span> by default an inline element and can only use padding and not margin.
Making it display inline-block allows it to use properties that apply to block elements such as a paragraph taking on margin.
body {
margin: 0;
}
.header {
height: 45px;
width: 100%;
background-color: royalblue;
color: white;
padding: 10px;
margin-top: auto;
margin-bottom: auto;
line-height: 11px;
/*use flex instead of display: inline-block; explanation is above*/
display: flex;
}
button.signup {
background-color: #2FA034;
border-radius: 10px;
color: white;
font-size: 20px;
font-weight: 300;
}
/* Material style */
button {
border: none;
cursor: pointer;
color: black;
width: 130px;
padding: 10px;
border-radius: 2px;
font-size: 19px;
background: royalblue;
/* Ripple magic */
position: relative;
overflow: hidden;
}
<div class="header">
<h1>Logo</h1>
Link 1
<button class="signup">Signup</button>
<button class="signup">Login</button>
</div>