How to make h1 display correctly?

Question

css

The bottom line is that I set the h1 element exactly as in the layout (60pt OpenSans 800), but on the page its length is about 750px, and in the layout the title is only 583px long, moreover, the last word climbs out of the bootstrap column. At the beginning of the layout of this block, I found that the width of the Bootstrap container in the layout is 1280px, and not the standard 1170px, so I changed the width in css to 1280, maybe this is the case? I'm not sure if I changed the width of the grid correctly, as it looks like a bit of a crutch.
here is a link to the archive with psd and page code: 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;
}

Answer 1

Get h1 size in px and change pt to px