How do I make the entire width of a menu item change background color when hovered over?

Question

I want it to be like this:

Currently, it is like this:

So, as shown most of the background is highlighted in white but there is a small left and right section which is purple.

The code I have so far which correspond to the menu items is:

.collapsible-menu ul 
li:hover:not(:last-child) {
background-color:white;
width:100%;
color: #4C27B3;
text-decoration: none;
 outline:none;
}

It is probably a quick fix but I need a second pair of eyes to pinpoint the issue. Many thanks in advance.

All code can be seen here:

https://codepen.io/JoyFulCoding/pen/EzXowL

Answer 1

in Css

.menu-content{
overflow: hidden;
font-family: 'Raleway', sans-serif;
font-weight: bold;
padding: 0 0 0 50px;

/* add this margin left & right to make hover white full screen*/ 
margin-left: -79px; 
margin-right: -30px; 
}

Answer 2

in Css

.collapsible-menu {
    background-color: #4C27B3;
    border: none;
    box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
}

Remove Padding from this class in code