Hello, lovely theme, first of all!

Secondly, I was wondering if you could give me some way to remove the headers (and most of the space between the top and the first entry) in the layout without it removing all the space at the top and cutting off the top of the icon? I feel sure it must be something in this section of code:

#header, #footer {
margin: 0;
clear: both;
padding: .5em;
}

#header {
background: transparent;
padding: 18vh 0;
text-align: center;

}

h1#title span {
background: #b7c1c2;
font-weight: normal;
font-size: 70%;
font-size: 3.3vmin;
letter-spacing: 2px;
padding: 0 10px;
text-transform:uppercase;
}

h1#title {
margin-bottom: -29px;
}

h2#subtitle {
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
color:#fff;
font-family: 'Archivo Narrow', Helvetica, Arial, sans-serif;
font-size: 500%;
font-size: 11.3vmin;
font-weight: 700;
letter-spacing: 2px;
line-height: 80%;
margin:0 auto;
padding: 50px 0 55px 0;
text-transform: uppercase;
width:70%;
}

h2#pagetitle span {
background: #b7c1c2;
font-size: 90%;
font-size: 3.3vmin;
font-weight: normal;
letter-spacing:2px;
padding: 0 10px;
text-transform:uppercase;
}

h2#pagetitle {
margin-top: -27px;
}

I added a display: none; under the #header portion, since that's worked with other layouts, but that just results in moving the entry all the way to the top of the page with no margin and cutting off the top of the icon. I thought adding in a margin-top: somewhere would fix this, but I haven't any idea where to put it.

Apologies for being a newb lol, still learning css.