Responsive Menu Help

Hi,
I volunteered to redo our website.
I created our first one on WordPress and now I am redesigning – but I am a bit of a novice.
I am having problems with the responsive menu.
I want a full width menu with Menu item and sub menus showing by default. And I cannot find a way to do it.
Also I wanted to list the sub menus in two columns.
I borrowed some CSS to do this but they appear jumbled. I have tried to alter the width but no success.
The code is:
.sub-menu-columns ul.sub-menu li {
display: inline-block;
float: left;
width: 200px;
}
.sub-menu-columns ul.sub-menu li:nth-child(odd) {
float: left;
margin-right: 10px;
}
.sub-menu-columns ul.sub-menu li:nth-child(even) {
float: right;
}
All i want is to have all my menus showing on toggle click.
Then main menu item with submenu items below it in 2 columns.
I am using Astra and I hoped it would be a simple excerise but it is proving beyond my experience.

I would appreciate any guidence or pointers; I don’t ask for anyone spend their time doing it for me.
Many thanks for your help