Custom Header - Spacing out navigation links on mobile view

Site URL: https://www.shopgraberco.com

Anyone know a way to get the site header to look exactly as it does on shopgraberco.com? To accomplish this I "hide" all the pages from the navigation and added text links below -- but I would like these text links to show in the navigation bar for mobile devices. I tried adding them as links instead but they are too crowded under the logo instead of spread out like this.

Please share your site url, we will give the code to solve this

"I tried adding them as links instead but they are too crowded under the logo instead of spread out like this."

shopgraberco.com

Add to Design > Custom CSS

div#block-2ed642c5795f2af6945a p {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

@tuanphan - it didn't work. I had to move them back down to a separate block but what I really want is for them to be spread out like this IN the header. When I put them up in the header, they stack on top of each other like this...

I see both screenshots look same?