Home page menu keeps on changing position depending on screen resolution.

Hi, we are new to CSS and Wordpress itself. We have been doing some CSS editing for these past 2 weeks so please bear with me.

We are working on this Webpage as a subdomain of our Main Company website.

The Menu on the homepage keeps on changing position when viewed from different computers with different screen resolutions.

This is the code i used to edit using Jetpack.

#main-nav {
position: relative;
top: 40px;
left: 30px;
display: inline;
}

.site-header-half-width-logo .site-title, .site-header-half-width-logo .site-description {
text-align: left;
position: relative;
top: 10px;
left: 100px;
}

also the Site Title part of the website ( The name of the Realtor ) also changes position depending on the screen resolution.

here is the code used

.site-title a, .site-title a:visited {
font-family: 'ChunkFiveRegular';
font-size: 60px;
font-size: 6rem;
color: #fff;
text-decoration: none;
line-height: 1.1;
position: relative;
}

Even the background picture is cut when viewed on my 23" monitor

here is the code used:

.site-header {
width: 100%;
min-width: 100%;
min-height: 100%;
height: 149px;
background: url(http://i.cubeupload.com/mt1rLJ.jpg);
min-width: 100%;
Min-height: 100%;
height: 149px;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
text-align: center;
}

Also please send us instructions on how to attach screenshots for future help inquiries.

We would appreciate a prompt response.
Thank you very much.