Вот фрагмент моего кода проекта:
body {
height: 100%;
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
}
input, button {
font-family: 'Montserrat', sans-serif;
}
.img_main_container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.btn_sign_up, .btn_login:hover {
background: #5d8ffc;
color: #fff;
border: 1px solid #5d8ffc;
border-radius: 5px;
display: block;
width: 300px;
height: 40px;
transition: 0.3s;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
}
.btn_login, .btn_sign_up:hover {
background-color: Transparent;
background-repeat:no-repeat;
color: #ffffff;
border-radius: 5px;
display: block;
width: 300px;
height: 40px;
cursor:pointer;
overflow: hidden;
outline:none;
transition: 0.3s;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
}
<!DOCTYPE html>
<html>
<body>
<div class="img_main_container">
<img src="https://natgeo.imgix.net/subjects/headers/ND%20header%20(1).jpg?auto=compress,format&w=1920&h=960&fit=crop" alt="Storm" style="width:100%;">
<div class="centered">
<button class="btn_sign_up">Sign up</button>
<button class="btn_login">Login</button>
</div>
</div>
</body>
</html>
Все работает, как вы можете видеть.Но я хочу, чтобы две кнопки были рядом, как показано на этом рисунке: 
Я пробовал так много примеров, но ничего не получалось.И я до сих пор не могу понять, что здесь не так.Было бы здорово, если бы кто-нибудь мог помочь.Заранее спасибо.:)