How can I make the hover menu the full width of the div?

Question

css

I'm trying to make a menu for responsive design. Breakpoint at 720px (when menu background turns green) - how to make hover on menu link white in full width of this green div? I can't imagine that I just haven't tried it already. How to make this hover the width of the .main-menu div? There, the width is indicated 50vw - maybe because of this value there is a conflict?
codepen.io/dhatt/pen/BzEZRN

Answer 1

.main-menu li {width:100%;padding:0;flex:1 1 100%;}
.menu-links {padding:10px 0;text-align:center;display:block;}