Two recommended approaches:
1) Create, edit, and upload a child theme to your site – read more about how to do that here: http://codex.ww.wp.xz.cn/Child_Themes
2) Use a custom css plugin: https://ww.wp.xz.cn/plugins/search.php?q=custom+css
Then in the CSS stylesheet for your child theme (or in the code editor box of your custom CSS plugin) you can add your custom CSS to change the way things look in the browser.
In your particular case I’d be looking at #header and it’s sub-elements for styling.
if you open your child theme’s (flare-child-theme) style.css file, you’ll see the styling for your header towards the top. http://www.grosvenortechnology.com/wp-content/themes/flare-child-theme/style.css
I’m really not sure what you’re wanting to make wider, as the gray bar goes the entire width.
You can use chrome’s inspect element to find the specific css you’re looking to change: https://developer.chrome.com/devtools/docs/elements-styles
Sorry by width I meant vertically, I want to add a larger logo, and to make this fit I need the grey bar to be larger.
I’ve got the Editor open and having a look through the code at size values (px) to see if any look like what I need to change. But I don’t think they are. Is there anything I should be looking out for while going through the code?