batharoy

May have to clear browser cache, it did work in Chrome DevTools.

Looks like you forgot the period in front of widget.

.widget {
      background-color: #fff;
}

For the image header, it is not as wide as the content area so it will not stretch the full width unless told to with css. BUT that will either distort or enlarge the image so it’s not as clear.

For the menu, the li & ul elements have a float: left applied to them. It can easily be fixed with this code.

#nav-main .nav-main {
    float: none;
    text-align: center;
    border-left: none;
    border-right: none;
}
#nav-main .nav-main li {
    float: none;
    display: inline-block;
}

I’m not sure what it should look like but I see a very cleen simple layout.
http://s10.postimg.org/43rdnhne1/Haute_Design_by_Sarah_Klassen.png

The only thing I noticed is that the whole page aligns to the left instead of the usual center. Is this by design? In the screen shot I centered it with some simple css edits.

.nav-collapse.tc-hover-menu-wrapper {
    width: auto;
}

Do you have 2 menus in Appearance > Menus?
Do you have them set in Appearance > Customize?
Do you have the topbar menu set in Appearance > Frontier Options?

I would do #2 at the end.
1
3
4
5
2

That way you can compare the parent / child before any update changes, if there are any.

Try adding a max-width to your site-info.

#siteinfo {
    max-width: 100%;
}