I’m having trouble sizing the embedded youtube video so that it doesn’t affect other elements. Right now if I shrink the page to be 320px or less the navigation section goes offscreen and the background-color of the navigation doesn’t reach the end of the page due to the youtube video being too wide. Any ideas on how to fix this?
I’m thinking it has to do with the navigation bar code:
#nav-bar {
/* grid navigation with 4 sections: home, logo, account, cart */
background-color: #6085a0;
display: grid;
grid-template-columns: 1fr;
justify-items: center;
width: 100%;
}
nav > div {
/all divs in navigation have the same structure/
font-size: 1.3em;
min-height: 3.13em;
padding: 0.6em 3em; /top/bottom & right/left/
align-items: center; /keeps items centered/
}
Codpen: