По макету необходимо, разместить несколько блоков в header в одном ряду, как показано на картинке
Но при использовании dispalay: inline-block кнопка располагается с новой строки
body {
margin: 0;
width: 100%;
height: auto;
}
header {
background-color: rgb(0, 146, 63);
box-shadow: 0px 5px 15px 0px rgba(0, 146, 63, 0.5);
width: 100%;
height: 41px;
}
.shipping_container {
width: 50%;
height: 41px;
display: flex;
align-items: center;
}
.container_1 {
color:aliceblue;
font-size: 14px;
font-family: "Open sans";
padding-left: 25px;
align-items: center;
display: flex;
}
.container_1::before {
content: '';
width: 6px;
border-radius: 50%;
height: 6px;
background: white;
}
.button_container {
display: inline-block;
height: 41px;
background-color: blue; /*для наглядности, чтобы видеть, где размещается блок*/
float:right;
margin-right: 10%;
}
.login_button {
line-height: 41px;
border-left: 1px solid;
border-right: 1px solid;
border-color: #03883c;
box-shadow: 0px 0px 5px 0px rgba(2, 49, 22, 0.1);
}
.login_button:hover {
background-color: #258b50;
}
<body>
<header>
<div class="shipping_container"><span class="container_1">
Free Shipping on Orders of Rs. 2587 - <span style="color: yellow; font-weight:
800">SHIP39</span></span></div>
<div class="button_container"><a class="login_button" href="#" style="color:aliceblue;
text-decoration:none">Login / Register</a></div>
</header>
</body>