title: can't change h1 font-size in print preview
body: <p>I can't change h1 font-size in print preview. although every other property works, the font size doesn't work.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{
   margin: 1%;
   padding:1%;
   background-color: rgba(0,0,255,.2);
   font-size: 100%;
   min-width: 500px;
  
  }
  header, footer{
    background-color:#0066FF;
    padding: 1%;
    margin: 1%;
  }
  header h1{
   font-size: 3rem;
   color:rgba(0,0,0,.7);;
  
  }
  
  section{
    margin:1%;
      padding:1%;
  }
  
  nav a{
   display:block;
   background-color: white;
   border: 1px solid black;
   text-align: center;
   border-radius: 35px;
   text-decoration: none;
   padding: 2%;
   margin: 1%;
  }
  
  h1{
   text-align: center;
   color:rgba(255,0,0,.7);;
  }
  
  
  .myClass{
   margin: 0em 1em;
   padding:.75em;
   border: 1px solid black;
   border-radius: .25%;
  
   /* Safari and Chrome */
   -webkit-column-count:3;
   -moz-column-count: 3;
   column-count:3;
  
  }
  
  
  
  ol{
   list-style:upper-roman;
   margin:1em;
  }
  img{
   display: none;
  }
  
  footer{
   clear: both;
   text-align:center;
   text-transform: uppercase;
  }
  
  
  @media screen and (min-width: 600px) {
   img{
    display: inline-block;
    width: 20%;
    margin-right: 4%;
   }
  
   section {
    display: inline-block;
    vertical-align: top;
   }
   #left {
    width: 20%;
   }
  
   #center {
    width : 70%;
   }
  
   #center div:last-of-type{
    width: 100%;
    padding:.75em;
    padding-left: 0;
    margin: 0em 1em;
   }
   h2 {
    font-size: 1.7em;
   }
   h1::after {
    content: "(I guess...)";
   }
  
   h3 {
    height: 35px;
    line-height: 35px;
    font-size: 1.6em;
    font-weight: bolder;
  
   }
  
   #center div p {
    height: 45px;
    line-height: 45px;
    font-size: 1.6em;
   }
  
   header , footer {
    background-color: initial;
   }
  
   footer {
    width: 70%;
    float: right;
   }
  
   footer p {
    text-align: left;
   }
  
  
  }
  
  @media print {
  
   nav a {
   display:block;
   background-color: white;
   border: 0;
   text-align: center;
   border-radius: 0;
   text-decoration: none;
   padding: 0;
   margin: 0;
   }
  
    h1 {
  
    font-style: italic;
    font-weight: bolder;
    font-size: 16px;
   }
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- 
  Create a stylesheet that will style the page 
  as it appears in the example. --&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;title&gt;Responsive Design Lab&lt;/title&gt;
        &lt;link rel="stylesheet" type="text/css" href="responsive.css"/&gt;
  &lt;meta charset = "UTF-8"&gt;
  &lt;/head&gt;
  &lt;!--  DO NOT CHANGE ANY PART OF THIS HTML CODE!!! --&gt;
  
  &lt;header&gt;
   &lt;h1&gt; Web Design is Awesome!!!&lt;/h1&gt;
   &lt;nav&gt;
    &lt;a href="http://www.umich.edu/"&gt;University of Michigan&lt;/a&gt;
    &lt;a href="http://www.intro-webdesign.com/"&gt;Intro to Web Design&lt;/a&gt;
   &lt;/nav&gt;
    &lt;/header&gt;
  
    &lt;footer&gt;
     &lt;p&gt;Sample code for Responsive Design .&lt;br/&gt; Colleen van Lent&lt;/p&gt;
    &lt;/footer&gt;
  &lt;!-- DO NOT CHANGE ANY PART OF THIS HTML CODE!!! --&gt;
     
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>