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.