title: mpdf only certain styles being applied
body: <p>I seem to be having issues with <a href="https://github.com/mpdf/mpdf" rel="nofollow noreferrer">MPDF</a> only loading certain styles in from my external stylesheet.</p>
  
  <p>I'm building my PDF in my Laravel application like this</p>
  
  <pre><code>$mpdf = new \Mpdf\Mpdf([
      'mode'           =&gt; 'utf-8',
      'margin_left'    =&gt; 0,
      'margin_right'   =&gt; 0,
      'margin_top'     =&gt; 50,
      'margin_bottom'  =&gt; 50,
      'margin_header'  =&gt; 0,
      'margin_footer'  =&gt; 0
  ]);
  $mpdf-&gt;writeHTML(file_get_contents($_SERVER['DOCUMENT_ROOT'] . '/css/pdf.css'), 1);
  $mpdf-&gt;setHTMLHeader(view('layouts.partials.pdf.header')-&gt;render());
  $mpdf-&gt;setHTMLFooter(view('layouts.partials.pdf.footer')-&gt;render());
  $mpdf-&gt;WriteHTML(view('layouts.pdf')-&gt;render(), 2);
  $mpdf-&gt;Output();
  </code></pre>
  
  <p>Which works fine, and is loading the HTML content fine.</p>
  
  <p>For this issue, its not applying styles to my header properly. My header content looks like this</p>
  
  <pre><code>&lt;header&gt;
      &lt;table&gt;
          &lt;tr&gt;
              &lt;td class="left"&gt;
                  &lt;h1&gt;My Title&lt;/h1&gt;
              &lt;/td&gt;
              &lt;td class="right"&gt;
                  @php
                  //Get the image and convert to base 64
                  $path = $_SERVER['DOCUMENT_ROOT'] . '/img/logo.png';
                  $type = pathinfo($path, PATHINFO_EXTENSION);
                  $data = file_get_contents($path);
                  $base64 = 'data:image/' . $type . ';base64,' . base64_encode($data);
                  @endphp
                  &lt;img src="{{$base64}}" alt="My Logo"&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>Which is loading the header perfect. </p>
  
  <p>The content of the <code>pdf.css</code> file looks like this</p>
  
  <pre><code>header {
    background-color: purple;
    height: 100px;
  }
  
  header table tr .left {
    width: 70%;
  }
  
  header table tr .left h1 {
    color: white !important;
    font-weight: bold !important;
  }
  
  header table tr .right {
    width: 30%;
  }
  
  header table tr .right img {
    width: 100px;
  }
  </code></pre>
  
  <p>But its only applying certain styles from the <code>pdf.css</code> file! Its colouring the background of the header purple, but it will not change the <code>font-weight</code> or <code>color</code> of the <code>h1</code>.</p>
  
  <p>Has anyone else experienced this before? Its like its picking and choosing which styles to apply, but because it renders a PDF, I cant use devtools to inspect!</p>
  
  <p>Any help would be appreciated.</p>