Path of Light Yoga

Please help I am stuck.

Here is my code for yoga.css:

body { background-color: #3f2860;

color: #3f2860;

font-family: verdana, arial,sans-serif; margin: 0; padding:0;

}

header { background-color: #9bc1c2;

background-image: url(lilyheader.jpg);

background-repeat: no-repeat;

background-position: right;

height: 150px; padding-top:1px;

}

h1 { padding-top: 1em;

padding-left: 2em;

}

nav { float: none;;

width: auto;

font-weight: bold; padding-left:2em;

}

nav a { text-decoration: none;

border-color: #cccccc;

border-width: 3px;

border-style: outset;

text-align: center;

font-size:90%; font-weight: bold;

display: block;

padding: 2.5em 1em;

margin: 0; float:clear;

}

nav a:link { color: #3f2860;

}

nav a:visited { color: #497777;

}

nav a:hover { color: #a26100;

border: 3px inset #333333;

}

nav ul { list-style-type: none;

}

footer { background-color: #9bc1c2;

font-size: .60em;

font-style: italic;

text-align: center;

}

.studio { font-style: italic;

}

#wrapper {margin-left: auto;

margin-right: auto;

width: 100%;

background-color: #f5f5f5;

min-width: 0px;

max-width: 1480px; margin : 0px; padding:0px;

}

main { padding-left: 2em;

padding-right: 2em;

margin-left: 170px;

padding-top: 1em;

}

* { box-sizing: border-box;

}

.floatleft { float: left;

margin-right: 4em;

}

.clear { clear: both;

}

header, nav, main, footer { display: block;

}

#mobile { display: none;

}

#desktop { display: inline;

}

@media only screen and (max-width: 1024px) {

body { margin: 0;

padding: 0;

}

#wrapper { width: 100%;

min-width: 0;

margin: 0;

padding: 0;

}

header { padding-top: 1px;

}

h1 { padding-top: 1em;

}

nav { float: none;

width: auto;

padding-left: 2em;

}

nav a { padding: 0.2em;

margin-left: 0.3em;

float: left;

width: 23%;

}

main { padding-top: 2.5em;

padding-bottom: 2.5em;

padding-left: 1em;

padding-right: 1em;

margin: 0;

font-size: 90%;

clear: both;

}

#hero img{width: 100%;

height: auto;

}

h2 { padding-left: 2em;

padding-right: 2em;

}

h3 { padding-left: 2em;

padding-right: 2em;

}

p { padding-left: 2em;

padding-right: 2em;

}

dl { padding-left: 2em;

padding-right: 2em;

}

main ul { margin-left: 2em;

}

.floatleft { margin-left: 2em;

margin-bottom: 1em;

}

.clear { padding-left: 2em;

}

}

@media only all and (max-width: 768px) {

h1 { font-size: 2em;

padding-top: 0.25em;

padding-left: 1.5em;

width: 85%;

text-align: center;

}

nav a { padding: 0.5em;

width: 45%;

float: left;

min-width: 6em;

margin-left: 0.5em;

}

main { padding-top: 0;

}

.floatleft { float: none;

display: none;

}

#hero { display: none;

}

footer { padding: 0.5em;

margin: 0;

}

#mobile { display: inline; }

#desktop { display: none; }

}

THANK YOU!!!

Task 7: Configure the Mobile CSS. Open yoga.css in a text editor. Note that any device with a screen max-width of 1024 pixels or less will apply the styles you coded in Task 6. In this task you will code additional styles needed for smaller devices. Edit the style rules as follows: 1. Code a media query to select for typical smartphone device viewport size, such as @media only all and (max-width: 768px) { 2. Code the following new styles within the media query: 1. Configure an h1 element selector. Set the font size to 2em, top padding to 0.25em, left padding to 1.5em and width to 85%. Also configure centered text. 2. Configure the anchor tags in the navigation area. Configure a style rule for the nav a selector. Set padding to 0.5em, width to 45%, float to left, minimum width to hem, and left margin to 0.5em. 3. Configure the main element selector. Set top padding to 0. 4. Configure the float left class selector. Set the float property to none. Set display to none. 5. Configure the #hero selector. Set display to none. 6. Configure the footer element selector. Set padding to 0.5em and margin to 0. 7. Remember the telephone number hyperlink you created in Task 2? Configure the CSS for the phone number display as shown below: #mobile { display: inline; } #desktop { display: none; } Save the yoga.css file. Use the CSS validator to help you find syntax errors. Task 7: Configure the Mobile CSS. Open yoga.css in a text editor. Note that any device with a screen max-width of 1024 pixels or less will apply the styles you coded in Task 6. In this task you will code additional styles needed for smaller devices. Edit the style rules as follows: 1. Code a media query to select for typical smartphone device viewport size, such as @media only all and (max-width: 768px) { 2. Code the following new styles within the media query: 1. Configure an h1 element selector. Set the font size to 2em, top padding to 0.25em, left padding to 1.5em and width to 85%. Also configure centered text. 2. Configure the anchor tags in the navigation area. Configure a style rule for the nav a selector. Set padding to 0.5em, width to 45%, float to left, minimum width to hem, and left margin to 0.5em. 3. Configure the main element selector. Set top padding to 0. 4. Configure the float left class selector. Set the float property to none. Set display to none. 5. Configure the #hero selector. Set display to none. 6. Configure the footer element selector. Set padding to 0.5em and margin to 0. 7. Remember the telephone number hyperlink you created in Task 2? Configure the CSS for the phone number display as shown below: #mobile { display: inline; } #desktop { display: none; } Save the yoga.css file. Use the CSS validator to help you find syntax errors