Responsiveness issue on macbook pro 13

[UmiKami]

I am making the landing page, and everything looks fine on desktop. But when I check how it looks on the MacBook, some elements look like they are out of place on the Y-axis. The issue gets fixed if I put the browser in full screen.

Here’s the code for the button:

.about-container{
    height: 100vh;
    width: 100%;
    display: flex;
    position: relative;
    
    &__view-video-btn{
        border: none;
        padding: 3rem 8rem;

        background-image: linear-gradient(to bottom right, var(--color-hero-1), var(--color-button-1));
        border-radius: 50px;

        font-size: 2.2rem;
        font-weight: 600;

        color: var(--color-secondary);
        outline: none;
        position: relative;

        cursor: pointer;

        &:active{
            transform: translateY(-1.5px);
            box-shadow: 0 2px 3px rgba(0,0,0,.1);
        }

        &::after{
            content: "";
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 50px;

            transition: background-color .4s;
        }

        &:hover::after{
            background-color: rgba(196, 222, 255, 0.2);
        }
    }

What would be the approach to fix this?

Thank you!