Как сделать так чтобы h1 отображался корректно?

Question

[HappyRa1n]

Суть в том, что элемент 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;
}

Comments

[Rustam Bainazarov]

Не используйте PT никогда.

[HappyRa1n]

Я пробовал заменять pt на px, однако в этом случае ширина текста наоборот становиться меньше чем нужно(в макете 580px на деле около 500px)

[Stalker_RED]

HappyRa1n, либо у вас шрифт отличается, либо межбуквенное расстояние нестандартное. Смотрите внимательнее что в макете и что у вас в верстке.
А вообще пиксель-перфект в браузере удается далеко не всегда, а с текстом это вообще нереально - рендер текста зависит и от браузера, и от версии ОС и от настроек.

Answer 1

[Sergey4562]

Получите размер h1 в px и измените pt на px