Congratulations! I'm glad you're digging into it, that's really the best way to get comfortable with how to do things.
As far as getting the image up in the header, it's quite doable, it just depends on how you want the design to look. You could have the site title like it is on the left and the picture on the right where the menu currently is, and move the menu underneath.
Or, you could have the picture go across the entire header, with the site title & tag line (What you don't know ...) on top, although the text might blend in too much (especially the blue text); you could put a semi-transparent background to the text, though,
The file you want to study is the virtual header.php file, located at Appearance > M.O. > Sub Templates. You first want to read about Sub Templates in the Sub Templates section. The main idea is that by using a Sub Template for a page element like the header, for example, you only need to change it in one file to affect how the header looks across the rest of your site.
The only other thing you have to remember is that the theme is based on a 12 column grid. That allows that theme to be "responsive" (change according to the width of the browser, so that the site is readable on a smartphone or tablet). You'll see a DIV with a class of row. Each row DIV will contain "column" DIVs that have a class of coln, where n is a number. The column numbers within each row DIV have to add up to 12 in order for the web page to respond properly.
So at the top of header.php, you'll see a DIV with the ID of banner, and it has a class of row. Then inside the banner DIV is a logo-area DIV which contains the site title, and it has a class of col5. Also within the banner DIV is the menu, which is created by a call to the wp_nav_menu function. One of the parameters that get passed is container_class, and you can see that one of the values for that parameter is col7. So the banner DIV is constructed correctly because the class of the logo-area (col5) and the class of the menu (col7) add up to 12 (5 + 7).
If you look at your site, you'll see that the site title takes up about 5/12 of the space going across, while the menu takes up 7/12. That should clue you in as to how you can change the size of a particular area. If you change the classes of logo-area and the menu to be both col6, you'll see that they will then take up about half of the header space.
If you wanted to move the menu to a separate space under the site title, you would create a new row DIV under the banner DIV and move the menu code inside, changing the class of the menu from col7 to col12. Likewise with logo-area, you would change that from col5 to col12.
Don't forget to click the Save Changes button at the bottom. If you happen to badly screw up the appearance, you can always revert back to the default settings by clicking on the subtemplate-header button at the bottom. Don't click the Reset ALL button because that will also revert back all of the CSS changes that you made earlier. In fact, this might be a good time to check out the Export Import section, where you can save your settings to an external file as a backup, in case you do happen to make some unwanted changes and need to get back to some place that you know works.