I want the menu to align with the header (right now, there's a big space before the first menu item) and I also want to move the header image and menu to the right so that they are over the site content underneath.
It looks like this CSS is pulling the menu 20px further from the left on devices over 783px wide:
@media screen and (min-width: 783px) {
.primary-navigation {
float: left;
margin-left: 20px;
}
}
You can tweak this style by changing 20px to push the menu further over to the left. For example, this is how it looks if I change that value to -40px:
https://cloudup.com/c5sSxsWmNCU
You may also need to add !important just before the semicolon on the margin-left line to force the style to "take" but if it works without it, you should leave it out.