Some CSS bugs on front page driving me crazy.

I’m trying to help a friend who is having frustrations with her site.

On the “home” page, it very briefly appears to sort of “slide” open the top bit, causing an annoying flicker which isn’t on other pages.
Also, I’ve told it to be one column, no menu, but there’s a gape on the left on larger screens, and a big gap at the top.

After 2 hours of frustration, I’ve narrowed down a few things:

In the home page, it has

<div id="content" class="site-content">
<div id="primary" class="content-area">

But on other pages, it has:

<div id="content" class="site-content">
<div class="wrap"> <----- not on hoome page!
<div id="primary" class="content-area">

I’ve managed to fix the whitespace and redundant page title for most pages with the following custom CSS.

.entry-title {display:none;}
.site-content {padding-top:10px;}

However, while the “home” page is obeying the entry-title directive, it’s just ignoring the padding directive.

As for the misaligned body text on all pages, it all starts to go wrong at about 768px when the text starts to “open up” a space for a menu bar on the left.
But as I say, I chose one column, no sidebar, so the text would align properly.

Any help appreciated!

Browsers affected: Chrome, IE11 and Edge (all latest versions)