FYI i am brand new to css. im currently working on a project thats basically a portfolio of different things. for some reason theres a section in my webpage that is not resizing correctly. i want the whole container to scale down proportionately. my other sections that are only image based work just as intended.

here is my css code for the video section.

/* VIDEO SECTION */
.video {
    display: flex;
    height: 30rem;
    padding: 6rem 2rem 5rem 2rem;
}
.video h2 {
    font-family: "Noto Sans Mono";
    font-weight: 300;
    align-self: flex-start;
    padding-right: 2.8rem;
    padding-top: 8rem;
}
.videos {
    max-width: 100%;
    width: 90%;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .5rem;
    padding-left: 5rem;
    padding-right: 2.8rem;
    border-left: solid black .07rem;
}
.vid {
    width: auto;
    height: auto;
    max-height: 250px;
    object-fit: cover;
}
.row1 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: .5rem;
}
.row2 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: .5rem;
}

the video section is pretty much identical to my other sections that work fine but this one does not.
please help me. and since im new please try to dumb down as much as you can