Making Search Bar Smaller

The search bar in the top navigation area has a maximum width of 25% (of the overall site header area, which has a maximum width of 1180px). Add the following and adjust the 25% number.

.header-search {
max-width: 25%;
}

If you have not yet done so, I would suggest creating a child theme so that any customizations you make will not be overwritten by a future theme update. Alternately you can use the Edit CSS function in the Jetpack plugin, or use one of the other Custom CSS plugins that will keep CSS changes from being overwritten.

Jetpack plugin
Child Themes
Child Theme creation plugins
Custom CSS plugins

Thank you.
Is there something I can put in the Edit CSS that will then make the space for the menu to the right of the search bar bigger?

The site title area (.site-branding) is set at 25% max-width as is/was the search (.header-search). The menu is set at 50% max-width (.main-navigation). You can adjust all of those as desired keeping the total of the 3 to 100% and you will be good to go.

Perfect! That worked. Thank you!

You are welcome.