Header-area: White-Space

http://puproket.com
I am trying to change (white-space) of the header-area. There are 2 things which i want to do, and i guess the solutions are related, so i’ll put them both in one post.

(1) The Site-Title (“Pup Roket”) needs to be about 10px further down. In other words, 10px of white-space before the Site-Title.

(2) Add more (white-) space to bottom of Header, about 10px.
-Currently, the content of a post /page “disappears” too close to the Site-Title on scroll. I want content to disappear about 10px sooner that it does.

Notes:
I have tried doing this by adding to css which already changes aspects of the header-area. *However, while i can change the header-area, it doesn’t push the content of a post /page further-down the screen, as it were (so Post-Title ends up being obscured.)

Examples of what i’ve tried, which doesn’t work right:
Changing /adding to the following css i’m already using; changing ‘top’ or ‘padding-bottom’ values

.site-branding {
    width: 100%;
    text-align: center;

}

.site-header {
	  
    position: fixed;
    top: 0;
    opacity: 1;
    z-index: 1;
    background-color: #FFFDFD;
    padding-bottom: 5px;
    
}

.content {
        margin-top: 10em;
    }

I also tried this code, with similar limited success:

@media only screen and (max-width: 1600px) {
    .site-banner-media {
        padding-bottom: 40%;
    }

    .home .content-area, .blog .content-area {
        margin-top: 40%;
    }
}

Thanks for your consideration.