title: printing a page in javascript not following the css
body: <p>I am printing a div in a javascript and i was putting a css within it, why it doesn't follow my css? anything i put in my css was something nothing or it doesn't have an effect to arrange my print section. Can anyone teach me how to arrange the printing page in a javascript code with css to arrange my print?.</p>
  
  <p>how do i apply my css in this situation, </p>
  
  <p>Here is my code:</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-js lang-js prettyprint-override"><code>function printDiv() {
    var divToPrint = document.getElementById('printme');
    var htmlToPrint = '' +
      '&lt;style &gt;' +
      'body {' +
      'font-family: arial, sans-serif ;' +
      'font-size: 12px ;' +
      '}' +
  
      'header-cert{' +
      'text-align: center;' +
      'text-decoration: underline;' +
      '}' +
  
      '&lt;/style&gt;';
  
    htmlToPrint += divToPrint.outerHTML;
    newWin = window.open("");
    newWin.document.write(htmlToPrint);
    newWin.print();
    newWin.close();
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="printme"&gt;
    &lt;div class="border"&gt;
      &lt;div class="row"&gt;
        &lt;div class="cliniclogo" style="background-image: url()"&gt;
        &lt;/div&gt;
        &lt;div class="col-md-12 text-center"&gt;
          &lt;div class="header-cert"&gt;
            &lt;p class="certheader"&gt;&lt;/p&gt;
            &lt;p class="certheader" id="clinic_name"&gt;&lt;/p&gt;
            &lt;p class="certheader"&gt;&lt;label id="clinic_address"&gt;&lt;/label&gt;, &amp;nbsp; &lt;label id="city_name"&gt;&lt;/label&gt; &lt;/p&gt;
            &lt;p class="certheader"&gt;&lt;label id="province_name"&gt;&lt;/label&gt;, &amp;nbsp; &lt;label id="zipcode"&gt;&lt;/label&gt; &lt;/p&gt;
          &lt;/div&gt;
          &lt;!-- header-cert --&gt;
        &lt;/div&gt;
        &lt;div class="col-md-12 text-center"&gt;
          &lt;p class="medcert"&gt;MEDICAL CERTIFICATE&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- row --&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-md-4 col-md-offset-10"&gt;
          &lt;p&gt;Date: &lt;u&gt;&lt;?php echo "".date(' M j, Y'); ?&gt;&lt;/u&gt;&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- row --&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-md-4"&gt;
          &lt;p class="certmarg"&gt;To Whom It May Concern:&lt;/p&gt;
        &lt;/div&gt;
        &lt;!-- col-md-4 --&gt;
      &lt;/div&gt;
      &lt;!-- row --&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-md-12"&gt;
          &lt;p class="startindent"&gt;THIS IS TO CERTIFY that &amp;nbsp; &lt;label id="cert_name"&gt;&lt;/label&gt; &amp;nbsp; of &amp;nbsp; &lt;label id="cert_address"&gt;&lt;/label&gt; &amp;nbsp; was examined and treated at the &amp;nbsp; &lt;label id="cert_clinic_name"&gt;&lt;/label&gt; &amp;nbsp; on &lt;label id="cert_check_up_date"&gt;&lt;/label&gt;          with the following diagnosis: &amp;nbsp; &lt;label id="cert_diagnosis"&gt;&lt;/label&gt; &amp;nbsp; and would need medical attention for &amp;nbsp; &lt;label id="cert_physician"&gt;&lt;/label&gt; &amp;nbsp; days barring complication.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- row --&gt;
      &lt;div class="signatory"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-md-4 col-md-offset-10"&gt;
            &lt;u&gt;&lt;p id="cert_physician_signatory"&gt;&lt;label id="cert_physician_sig"&gt;&lt;/label&gt;, M.D.&lt;/p&gt;&lt;/u&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- signatory --&gt;
    &lt;/div&gt;
    &lt;!-- printme --&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>why does it not makes my <code>header-cert</code> centered in printing? it didn't follow the css that i've put.</p>