Add Search Hero Box under Header

I am still seeing empty grid columns being used. Really need to remove the grid block and just add the content to the container block. I need to change so i can provide CSS to force the width of the Search field, which won't work properly with those columns around it.

Alright Removed it

Add this CSS:

.gb-inside-container form.search-form label {
    flex: 1;
    max-width: 600px;
}
.gb-inside-container form.search-form input[type="search"] {
    width: 100%;
}

Adjust the max-width: 600px; to suit - or you can remove that property for it to fill the container.

Awesome that worked!

though on mobile the search button is next to the input field which is annoying
is there a way to make the button under the input field only on mobile?

Try this CSS:

@media(max-width: 500px) {
    .gb-inside-container form.search-form {
        flex-wrap: wrap;
    }
    .gb-inside-container form.search-form label,
    .search-form input[type=submit] {
        flex: 1 0 100%;
        margin-top: 5px;      
    }
    .gb-inside-container form.search-form input[type="search"] {
        text-align: center;
    }
    
}

kinda worked but can we add a bit of space in between the input and the button
now it's just attached to it?

best

edited the CSS here to include a little space