Search Alignment In Header

Try this CSS:

.header-widget {
    float: none;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

that kinda worked

this is how it looks with that code added

this is a mock up of what i want it to look like. i may want a "go" button after the search beox and then possibly something to the right of that like some links or text

Any chance you can link me to the site?

https://www.greatestreviews.co.uk

Try this as your full CSS:

.header-widget {
    float: none;
    width: 600px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
}

.header-widget .widget .search-field {
    width: 70%;
}

.header-widget .widget_search .search-submit {
    display: inline-block;
}

@media (min-width: 769px) {
    .site-logo {
        float: left;
        margin-right: 20px;
    }
}

Getting there! I just need it to the right of the logo instead of above?

Adjusted the CSS above :)

That did it! You are amazing!

Is there a way to make the search box a bit longer?

Adjusted again :)

ace! thanks a bunch!

You're welcome :)

i know i'm sort of gatecrashing my own thread, but is there anyway i can change the mobile view from this

to this? (ish)

This might help: https://docs.generatepress.com/article/header-widget/#showing-your-header-widget-below-other-header-elements-on-mobile

tom you are a genius

is there a way i can have the logo on the left and maybe in the future something on the right?

also search is coming up under logo like i mentioned but can i make it smaller so the button is to the right of the search box instead of underneath (sorry to be a pain)