title: My media query won't validate
body: <p>I'm attempting to set a media query for my site to display on a tablet (and then I have to do another one for a smartphone)...all my css validates with the exception of the media query.  I have looked on the w3C site, my textbook, and css-tricks.com and even though I feel like I'm following their examples my query  won't validate and the error is "only 0 can be a length. You must put a unit after your number."  My book (and the internet) says margin: 0; padding: 0;. When I put in any kind of unit it says the same thing.  Here is what I have now: </p>
  
  <pre><code>header, nav, main, footer { display: block; }
  body { background-color: #FFFFFF;
        background-image: url(background.jpg);
        color: #666666;
        font-family: Verdana, Arial, sans-serif;
  }
  #wrapper { width: 80%;
             min-width: 700px;
             max-width: 1024px;
             margin-right: auto;
             margin-left: auto;
             background-color: #90C7E3;
             box-shadow: 3px 3px 3px #666666;
  }
  header { background-color: #000033;
         color: #FFFFFF;
         font-family: Georgia, serif;
  }
  h1 { line-height: 200%;
      background-image: url(sunset.jpg);
      background-repeat: no-repeat;
      background-position: right;
      padding-left: 20px; 
      height: 72px;
      margin-bottom: 0;
  }
  nav { font-weight: bold;
       padding: 5px;
       float:left;
       width: 160px;
       padding: 20px 5px 0 20px;
  }
  nav a { text-decoration: none; }
  nav a:link { color: #000033; }
  nav a:visited { color: #344873 }
  nav a:hover { color: #FFFFFF; }
  nav ul { list-style-type: none;
         margin: 0;
         padding-left: 0; 
  }
  h2 { color: #3399CC;
      font-family: Georgia, serif;
  }
  dt { color: #000033;
      font-weight: bold; 
  }
  .resort { color: #000033;
            font-size: 1.2em;
  }
  footer { font-size: 0.70em;
         text-align: center;
         font-style: italic;
         padding: 10px;
         margin-left: 170px;
         background-color: #FFFFFF;
  }
  h3 { color: #000033; 
  }
  main { padding-left: 20px;
          padding-right: 20px;
          background-color: #FFFFFF;
          margin-left: 170px;
          padding-top: 1px;
          padding-bottom: 1px;
  }
  main img { float: left;
             padding-right: 20px;
             padding-bottom: 20px;
  }
  main ul { list-style-position: inside; }
  .clear { clear: both; }
  
  @media only screen and (max-width: 1024 px) {
      body {margin: 0; 
          Padding: 0;
          background-image: none; }
      #wrapper {width: auto;
          min-width: 0px;
          margin: 0;
          box-shadow: none; }
      h1 {margin: 0; }
      nav {display: block;
          float: none;
          width: auto;
          padding: 0.5em; }
      nav li {display: inline-block; }
      nav a {padding: 1em; }
      main {padding: 1em;
          margin-left: 0px;
          font-size: 90%;  }
      footer {margin: 0; }
  
   }
  </code></pre>
  
  <p>here is my HTML: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;title&gt;Pacific Trails Resort&lt;/title&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;link rel="stylesheet" href="pacific.css" media="screen"&gt;
  &lt;link rel="stylesheet" href="pacificprint.css" media="print"&gt;
  &lt;link rel="stylesheet" href="pacific.css" media="only screen and (max-width:1024px"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="wrapper"&gt;
  &lt;header&gt;&lt;h1&gt;Pacific Trails Resort&lt;/h1&gt;&lt;/header&gt;
  &lt;nav&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="yurts.html"&gt;Yurts&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="activities.html"&gt;Activities&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="reservations.html"&gt;Reservations&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;main&gt;
  &lt;h2&gt;Enjoy Nature in Luxury&lt;/h2&gt;
  &lt;img src="coast.jpg" alt="scenic ocean coastline" width="320" height="250"&gt;
  &lt;p&gt;&lt;span class="resort"&gt;Pacific Trails Resort&lt;/span&gt; offers a special lodging experience on the California North Coast.
    Relax in serenity with panoramic views of the Pacific Ocean.&lt;/p&gt;
  &lt;ul&gt;
    &lt;li&gt;Private yurts with decks overlooking the ocean&lt;/li&gt;
    &lt;li&gt;Activities lodge with fireplace and gift shop&lt;/li&gt;
    &lt;li&gt;Nightly fine dining at the Overlook Cafe&lt;/li&gt;
    &lt;li&gt;Heated outdoor pool and whirlpool&lt;/li&gt;
    &lt;li&gt;Guided hiking tours of the redwoods&lt;/li&gt;
  &lt;/ul&gt;
    &lt;div class="clear"&gt;Pacific Trails Resort&lt;br&gt;
          12010 Pacific Trails Road&lt;br&gt;
          Zephyr, CA &amp;nbsp;95555&lt;br&gt;
    &lt;br&gt; 
    888-555-5555
    &lt;br&gt;
    &lt;br&gt;
    &lt;/div&gt;
  &lt;/main&gt;
  &lt;footer&gt;Copyright &amp;copy; 2014 Pacific Trails Resort&lt;br&gt;
  &lt;a href="mailto:yourfirstname@yourlastname.com"&gt;yourfirstname@yourlastname.com&lt;/a&gt;
  &lt;/footer&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>