Trouble with Bootstrap Grid

I have doing a sample project and having trouble with using bootstrap grid. I think some of the css in my header is messing with the bootstrap classes below it. Below is my html and my css

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Best Soil Test</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/876d2b1d31.js" crossorigin="anonymous"></script>
</head>
<body>
    <div class="header">
        <span><a href="./index.html" class="header_links">Home</a></span>
        <span><a href="./tests.html" class="header_links">Tests</a></span>
        <span><a href="./about.html" class="header_links">About</a></span>
        <span><a href="./contacthtml" class="header_links">Contact</a></span>
    </div>
    
    <div class="container text-center">
        <div class="row">
            <div class="col" id="box1">
                <p>TTTTTT</p>            
            </div>
            <div class="col">
                HHH
            </div>
        </div>
    </div>
</body>
</html>

CSS

body {
    background-color: coral;
    height: 2000px;
}

.header {
    padding: 20px 16px;
    background: #555;
    font-family: "Arial Black", Gadget, sans-serif;
    font-size: 18px;
    letter-spacing: 1px;
    word-spacing: 2px;
    color: #000000;
    font-weight: 400;
    text-decoration: none !important;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    position: sticky; top: 0;
    border-radius: 10px;
  }

.header > span >  a:link {
    color: black;
    text-decoration: none;
}

.header > span > a:visited {
    color: black;
    text-decoration: none;
}

.header > span > a:hover {
    color: pink;
    background-color: blue;
    text-decoration: none;
    border-radius: 20%;
    padding: 10px;
}

.header > span {
    margin-right: 40px;
    text-decoration: none;
}

#box1 {
    border: 2px solid #000000;
}

any help would be appreciated

Hi,
First of all, make sure to add the bootstrap library into your head element.
Bootsrap uses col-*-* for each box inside a row. after your div with .row class, you add your columns with the class col-*-*. you will replace both ( * ) with values. the first * is replaced by the size of your column ( sm , xs , lg). and the second * is replaced by the number of units upto 12. Overall your column should class should look something like class= "col-sm-4".
Your code is also correct and I think you should only include the bootstrap library if it is not already included by the site.
Hope this helps.

It would help if you told us what isn’t working for you.

Your code should create a two-column layout as long as you are using Bootstrap V4 and above.

sorry i didnt explain my issue.

I am trying to use the grid system in the ‘container’ class. when i try to implement to child divs to the container row, they dont adapt to the grid system.

not sure if something im doing is making them not work.