What am I missing with CSS grid here?

I dont understand what is exactly happening here. I’ve set the main header background to 100vw, the sidebar “social” to take up 10 vw and the videos class to 90vw. Why is there still a horizontal scroll bar and why are the grid items taking up that extra space when their parent property is set to repeat(3,1fr). Some clarification please.

Pictures attached.

Code here:

``

/* Background and Left Side */

#main-header {

background: #fff;

height: 100vh;

width: 100vw;

}

#main-header .content-container .social {

display: flex;

height: 100vh;

width: 10vw;

flex-direction: column;

justify-content: space-evenly;

align-items: center;

}

#main-header .content-container .social i {

display: block;

margin-bottom: 1rem;

font-size: 1.5rem;

color: #333;

}

#main-header .content-container .social a {

color: #333;

}

#main-header .content-container {

display: grid;

grid-template-columns: repeat(2,1fr);

}

/* Right Side */

#main-header .content-container .videos {

height: 100vh;

width: 90vw;

background: #f4f4f4;

}

#main-header .content-container img {

width: 330px;

height: 200px;

}

#main-header .content-container .videos .grid-container {

display: grid;

grid-template-columns: repeat(3,1fr);

}

#main-header .content-container .videos .contain-video {

display: flex;

flex-direction: column;

}

#main-header .content-container .videos .contain-video .text-wrap {

padding: 1rem 1rem;

width: 330px;

}

Can I have your html code? so that I will be easier to run and debug, thanks!