Нужно, расположить блок по центру (bootstrap4) как это показано в макете.
Не понимаю как это сделать, уже час с этим мучаюсь.
как сделано у меня:
* {
margin: 0;
color: #ffffff; }
button,
button:active,
button:focus {
outline: none; }
.home {
height: 670px;
background-size: cover;
background-image: url("../img/first-bg1.png");
background-repeat: no-repeat;
padding-top: 10px; }
.home .nav__links a {
color: #ffffff;
text-decoration: none;
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
font-weight: 600;
font-size: 12px;
padding-left: 20px; }
.home p {
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 15px;
line-height: 20px; }
.home hr {
width: 50px;
margin: 25px auto;
color: #00e0d0; }
.home h2 {
text-transform: capitalize;
font-family: 'Playfair Display', serif;
font-size: 30px;
text-align: center; }
.home .nav__links a:hover {
color: #00e0d0; }
.home .learnMore {
display: block;
color: #00e0d0;
font-family: 'Roboto', sans-serif;
font-size: 13px;
padding: 10px 5px;
width: 120px;
border-radius: 3px;
border: 1px solid #00e0d0;
background-color: rgba(0, 0, 0, 0);
-webkit-box-shadow: 0 0 0 0;
box-shadow: 0 0 0 0;
margin: 52px auto 0; }
<!DOCTYPE html>
<html lang="ru-RU">
<head>
<link rel="stylesheet" href="css/styles.css">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700&display=swap" rel="stylesheet">
<meta charset="utf-8">
<title>Главная страница</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
</head>
<body>
<div class="home">
<div class="container">
<div class="row align-items-center">
<div class="col-md-5"><img class="logo" src="./img/logo.png" alt="logo"></div>
<div class="col-md">
<nav class="nav__links"><a href="">home </a><a href="">about </a><a href="">expertise </a><a href="">teams </a><a href="">works </a><a href="">people say </a><a href="">contact </a></nav>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
<h2>we are awesome creative agency </h2>
<hr>
<p>
This is Photoshop`s version of Lorem Ipsum. Proin gravida nibh vel velit autctor aliquet.
Aenean sollicitudin, lorem quis bibendum auctor nisi elit consequat ipsum, nec sagittis sem nibh id elit.
Duis sed odio amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit.
</p>
<button class="learnMore" type="button">LEARN MORE</button>
</div>
</div>
</div>
</div>
</body>
</html>