Суть в том, что элемент h1 я задал точно как в макете(60pt OpenSans 800), однако на странице его длинна составляет около 750px, а в макете длинна заголовка всего 583px, более того последнее слово вылазит из бутстрап колонки. В начале верстки этого блока обнаружил, что ширина Bootstrap контейнера в макете 1280px, а не стандартные 1170px, поэтому переделал ширину в css на 1280 может быть дело в этом? Я не уверен, что правильно изменил ширину сетки, так как это немного похоже на костыль.
вот ссылка на архив с psd и кодом страницы:
https://yadi.sk/d/leuHDrqqIKu4iw<header class="header">
<div class="container">
<ul class="nav justify-content-center">
<li class="nav-item">
<a href="#" class="nav-link">home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">portfolio</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">about us</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">contact</a>
</li>
</ul>
<div class="row video justify-content-between">
<div class="col-lg-6">
<h1>our strong organaisation</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipis cing elit, sed do eiusmod tempor incididunt ut labore et.
ectetur adig ipis cing elit, sed do eiusmod tempor incididunt.
</p>
<a class="btn" href="google.com">Contact Us</a>
</div>
<div class="col-lg-6">
<video class="float-right" src="/video/cat.mp4" controls width="550px" height="358px"></video>
</div>
</div>
</div>
</header>
.video h1{
text-transform: uppercase;
color:#000000;
font-size: 60pt;
font-weight: 800;
}
header{
background: #f6f2f2;
}
.container{
max-width: 1281px!important;
width: 1280px;
}
.video p{
margin-top:25px;
padding-right: 70px;
font-size: 16px;
color: #6f6d6d;
margin-right: 1px;
font-weight: 400;
}
.btn{
padding: 20px 60px;
background: #ff2d2d;
text-decoration:none;
color: #ffffff;
margin-top:55px;
margin-bottom: 124px;
}
Простой
Простой
