I have a problem like I have 2 divs in a section, and I wanted to make them to get next each other just bu using display: inline-block; But it doesn’t happen even if I have given them the same width measures.

HTML Code

<main>
        <div class="main">
            <section id="video-section">
                <div class="video">
                    <div class="video-img">
                        <img src="../../src/img/h3-video-img.jpg" alt="Fiorello">
                    </div>
                    <a href="https://www.youtube.com/watch?v=K-0cjGCNYfs&t=1s">
                        <div class="button-bg">
                            <div class="button-play-margin">
                                <div class="button-play">
                                    <i class="fa-solid fa-play"></i>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="text-outter">
                    <div class="text">
                        <div class="text-heading">Suprise Your <span>Valentine!</span>  Let us arrange a smile. </div>
                        <div class="text-paragraph"> Where flowers are our inspiration to create lasting memories. Whatever the occasion... </div>
                        <div class="text-list">
                            <ul>
                                <li>Hand picked just for you.</li>
                                <li>Unique flower arrangements</li>
                                <li>Best way to say you care.</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </main>

CSS Code

main .main {
    margin: 0 auto;
    max-width: 1300px;
}

main .main #video-section {
    width: 1300px;
    height: 420px;
    /* display: inline-block; */
}

main .main #video-section .video {
    position: relative;
    display: inline-block;
    max-width: 650px    ;
    height: 420px;
    overflow: hidden;
}

main .main #video-section .video .video-img {
    width: 650px;
    height: 420px;
    overflow: hidden;
}

main .main #video-section .video .video-img img {
    width: 100%;
    height: 100%;
    transition: all 0.25s ease-in-out;
    object-fit: cover;
}

main .main #video-section .video:hover .video-img img {
    transform: scale(1.05);
}

main .main #video-section .video a {
    position: absolute;
    display: inline-block;
    inset: 0;
    z-index: 1;
    width: 650px;
}

main .main #video-section .video a .button-bg {
    position: absolute;
    width: 103px;
    height: 103px;
    background-color: #fff;
    top: calc(420px / 2 - 103px / 2);
    left: calc(650px / 2 - 103px / 2);
    border-radius: 50%;
}

main .main #video-section .video a .button-bg::before {
    position: absolute;
    display: block;
    content: '';
    margin: 5px;
    width: 0;
    height: 0;
    border: 0 solid #ff0000;
    border-radius: 50%;
    transition: all 0.25s ease-in-out;
    top: 46.5px;
    left: 46.5px;
    opacity: 0;
}

main .main #video-section .video:hover a .button-bg::before {
    position: absolute;
    content: '';
    display: block;
    margin: 5px;
    width: 90%;
    height: 90%;
    inset: 0;
    border: 2px solid#ff0000;
    border-radius: 50%;
    top: -2px;
    left: -2px;
    opacity: 1;
    /* Ozum eledim -_- */
}

main .main #video-section .video a .button-bg .button-play-margin {
    position: absolute;
    width: 100%;
    height: 32px;
    top: calc(103px / 2 - 32px / 2);
    left: calc(103px / 2 - 24px /2);
}

main .main #video-section .video a .button-play {
    width: 24px;
    height: 100%;
    display: inline-block;
}

main .main #video-section .video a .button-play i {
    font-size: 2rem;
    color: #ff0000;
}

Both divs have the same widths.
I have posted the whole code.
I’m sorry if my english is not understandable, and thanks by now.

I was trying o get 2 divs next to each other with display: inline-block; , but without float.