Почему я не могу поставить свои дивы рядом

Question

Я полный новичок, и я понятия не имею, что я делаю неправильно. Я хочу, чтобы текст располагался рядом друг с другом, например, справа, другой слева.

https://www.youtube.com/watch?v=qCFN8EujbGI

Я скопировал большинство об этом из этого видео. Это должно быть похоже на 36:50, но раздел Мое образование находится в разделе Мой опыт. (Не судите о структуре моего кода, это моя первая неделя).

<div class="SectionA1" id="SectionA1">
    <h1> hi </h1>
    <div class="container">
    <div class="row">
    <div class="col-md-6" > 
        <h2> hi </h2>
        <ul class="timeline" style="height: 425px;">
            <li>
                <h3 style="width: 95px"><span>hi</span></h3><br>
                <p>hi<br>
                <b>hi</b> - hi<br>
                <b>hi</b> - hi<br>
                <b>hi</b> - hi
                </p>
            </li>
            <li>
                <h3 style="width: 95px"><span>hi</span></h3><br>
                <p>hi<br>
                <b>hi</b> - hi<br>
                <b>hi</b> - hi<br>
                <b>hi</b> - hi
                </p>
            </li>       
        </ul>   
    </div> 
    <div class="col-md-6" >
        <h2> hi </h2>
        <ul class="timeline" style="height: 650px;">
            <li>
                <h3 style="width: 95px"><span>hi</span></h3><br>
                <p>hi<br>
                <b>hi</b> - hir<br>
                <b>hi</b> - hi<br>
                <b>hi</b> - hi
                </p>
            </li>
            <li>
                <h3 style="width: 95px"><span>hi</span></h3><br>
                <p>hi<br>
                <b>hi</b> - hi<br>
                <b>hi</b> - hi <br>
                <b>hi</b> - hi
                </p>
            </li>   
            <li>
                <h3 style="width: 95px"><span>hi</span></h3><br>
                <p>hi<br>
                <b>hi</b> - hif<br>
                <b>hi</b> - hi<br>
                <b>hi</b> - hi
                </p>
            </li>   
        </ul>   
    </div>
    </div>
    </div>  
    </div>


html{
    scroll-behavior: smooth;
}

*{
    padding: 0;
    margin: 0;
    list-style: none;
}

body{
    box-sizing: border-box;
    font-family: Montserrat;
}

#SectionA1{
    height: 910px;
    background: green;
    width: 100%;
    background: #000000;
    background: url();
    background-color: rgba(0, 0, 0, 0.7) !important;
    background-blend-mode: color;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover; 
}

.SectionA1{
    padding-top: 50px;
    padding-bottom: 30px;
}

.SectionA1 h2{
    margin-bottom: 50px;
    margin-left: 300px;
}

.SectionA1 li{
    margin-left: 15%;
}

.SectionA1 p{
    padding-bottom: 50px;
    color: white;
    line-height: 2.2em;
}

.timeline{
    list-style-type: none;
    position: relative;
}

.timeline:before{
    content:'';
    background: #555;
    display: inline-block;
    position: absolute;
    left: 160px;
    width: 3px;
    height: 100%;
    z-index: 1;
}

.timeline li h3{    
    width: 200px;
    color: white;
    background-color: #000;
    padding: 5px 0px 5px 20px;
    font-size: 15px;
}

.timeline li h3 span{
    font-weight: bold;
    color: #ccc
}

.timeline li:before{
    content: '';
    background: #fff;
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    border: 3px solid #000;
    left: 150px;
    width: 20px;
    height: 20px;
    z-index: 1;
}

Answer 1

Проверьте ссылку на bootstrap. Когда я добавил bootstrap из CDN, это работает: https://prnt.sc/r9xiv6