Move Navigation links below header image

Changing which width to 100% would have worked? Changing the Header Image, or the links?
I can’t change the code and leave it since this is a live site

The URL is http://www.scannerschool.com

I’ve been playing with the changes by using FireFox’s Development interface, so I can make live changes and see what happens to the display.

Thanks

I cannot set the width and leave it for you to check because this is a live website. If I make the changes, then the navigation is invisible.

Here are two snapshots so you can see what is going on.

This is the theme default of 30% x 70%

And this is what happens if I modify the CSS to make the image and navigation width 100%. I highlighted a menu option so you can see where it dropped to on the page.

Here is the code that I used to make the changes.

#ht-site-branding {
    width: 100%;
}

#ht-site-navigation {
    width: 100%;
}

After playing with the CSS a little more, I can get close – but not quite.
There is a white bar between the two sections that I cannot remove. The Logo is still floating left and the links are still floating right – even though I tried to float them center. And the links are not full width. They seem to be stuck in in the main body width.

#ht-site-branding {
	align-content:center;
    width: 100%;
}

#ht-site-navigation {
    align-content: center;
    width: 100%;
    padding: 1px;
	background: #3b653d;}