Hi there!

Thanks for contacting us.

You have given both the logo and menu column col-4 grid space. https://prnt.sc/ydew5P-QVn12 As the sum of the elements in a row should be equal to 12 grid, so it is noot getting fulwidth, and ended up earlier with space on the right. If you edit the space for your logo amd menu colu for mobile with proper grid, so that the sum is 12, then this will be nice looking.

However, if you want to give your menu column to spread rest of the space, then you can use custom CSS either. Here is sample code for you, need to put in your custom CSS:

@media only screen and (max-width: 991px){
#sp-menu {
    width: 66%;
}
}

Note: Path towards custom CSS(Joomla 3): Extensions>Templates>Styles> Click on your current default template name then choose Template Options. Then find custom CSS within the custom code.

Best Regards