So I’m seeing that when I use flexbox for the menu when I use the hover code
.menu li:hover,
.menu .active {
background-color: #211b2a;
color: #fff;
display: block;
I get a change in the background but it isn’t the same length as the container’s background.
when I just get rid of flexbox in the display it seems to be fine and I get a similar result as the solution. However I was just curious if there was a way to use flexbox with this similar code to make it when I hover over the menu item or have it active… that it will match the background width of the container element. So far I’ve just made the width okay on a mobile screen and set the hover element to 100vw but when I change to larger widths and the menu background width becomes 20% i cant get a good responsive css code that will match the changing color hover bar to be just as wide when I adjust the screen size.
