How to reduce white space around title of page?

I want to reduce the gap between the top menu and the title of the page, and the title of the page and content below it. This is on the front page, using one column format.

I found a previous thread here that suggested the following code, however it appears to only work in reducing the gap below the title of the page, not above it. What am i doing wrong? Thanks

.site-content {
padding-top: 1em;
}

.page-header {
padding-bottom: 0;
}

@media screen and (min-width: 48em) {
.page.page-one-column .entry-header,
.twentyseventeen-front-page.page-one-column .entry-header,
.archive.page-one-column:not(.has-sidebar) .page-header {
margin-bottom: 0;
}
}