Header issues

Hello, I’m developing a theme from scratch for my own site and I’m having some header issues.

First, the header is covering the whole space which I want but once it gets smaller part of the image I need is cut out. Is there a way to set a media query where a different image (a cropped version) will appear on smaller screens?

Second, on the home page, there is a perfect amount of space/padding between .site-description and the divs above. However, when I switch to a different page, the spacing gets wider. Why is the spacing changing on different pages?

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/

.site-header {
    background-color: #fff;
    background-size: cover;
}
.site-branding {
    text-align: left;
    margin-top: 1em;
    padding-bottom: 4em;
}
.site-title {
    margin-left: 2em;
    font-family: 'Raleway', sans-serif;
    font-size: 2.4em;
    font-weight: 300;
    line-height: 1.3em;
    color: #fff;
    text-transform: uppercase;
    word-break: break-word;
    letter-spacing: 2px;
    padding-top: 2em;
}
.site-description {
    padding-top: 1em;
    font-family: 'Merriweather', serif;
    margin-left: 9.5em;
    font-size: 100%;
    color: #fff;
    font-weight: 300;
    letter-spacing: 1px;
    font-style: italic;
}
@media screen and (max-width: 50em)
{
    .site-title {
        font-size: 1.2em;
        margin-left: 1em;

    }
    .site-description {
        font-size: .6em;
        margin-left: 3em;
    }

}

.site-title a {
    text-decoration: none;
    color: inherit;
}

.site-title a:hover,
.site-title a:focus {
    text-decoration: none;
}

.site-title::after {
	display: block;
	content: "";
	margin-top: .7em;
        margin-left: 3.5em;
	width: 5em;
	border-bottom: solid 1px #fff;
	opacity: .75;
}

This is my code.

Thank you!