I'm building a website for my friend who is organizing a 5k to help raise money for cancer research. I'm attempting to build this mobile first and then add in media queries for tablet and desktop views. I am viewing the site on my iPhone but it's showing up in desktop view. I've copy and pasted the (novice) css below. Can anyone advise me on what I'm doing wrong?

Thanks!

/* SITE BODY =====================*/

body { background-color: #003366; color: #999; padding: 0 0; margin: 0 0; max-width: 100%; }

a { text-decoration: none; }

wrapper {

max-width: 100%;
margin: 0 auto;
padding: 0 5%;
background: #003366;

}

wrapper p {

padding-bottom: 20px;

}

/* LOGOS & IMAGES =====================*/

logo {

float: left;
margin-left: auto;
margin-right: auto;
max-height: 150px;
max-width: 150px;
max-width: 100%;
padding-left: 20px;

}

/* NAVIGATION =====================*/

nav { text-align: center; padding-top: 50px; margin: 20px 0 0; width: auto; }

nav ul { list-style: none; margin: 0 10px; padding: 0; vertical-align: middle; }

nav li { display: inline-block; }

nav a { color: FFFF66; font-weight: 800; padding: 15px 10px; }

/* HEADING =====================*/

main-header {

float: left;
display: inline-block;
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;

}

hr { color: yellow; }

nav a { color: yellow; }

h1 { color: silver; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; padding-top: 20px; }

nav a.selected, nav a:hover { color: grey; }

/* FOOTER =====================*/

main-footer {

float: left;
display: inline-block;
margin: auto;
padding: auto;
width: 100%

}

siteman-logo {

float: left;
max-height: 100%;
max-width: 100%;    
padding-bottom: 10px;

}

sfa-logo {

display: block;
margin-left: auto;
margin-right: auto;

}

main-footer p{

display: block;
text-align: center;

}

main-footer, .push {

height: 4em;

}