Repository: puppeteer
Issue: Bug: Screen Media Query is not applied correctly in the generated PDF file 
Labels: bug,upstream,confirmed,P3

<!--
STEP 1: Are you in the right place?

- For general technical questions or "how to" guidance, please search StackOverflow for questions tagged "puppeteer" or create a new post.

https://stackoverflow.com/questions/tagged/puppeteer

- For issues or feature requests related to the DevTools Protocol (https://chromedevtools.github.io/devtools-protocol/), file an issue there:

https://github.com/ChromeDevTools/devtools-protocol/issues/new.

- Problem in Headless Chrome? File an issue against Chromium's issue tracker:

https://bugs.chromium.org/p/chromium/issues/entry?components=Internals%3EHeadless&blocking=705916

For issues, feature requests, or setup troubles with Puppeteer, file an issue right here!
-->

### Steps to reproduce

**Tell us about your environment:**

* Puppeteer version: 8.0.0
* Platform / OS version: Windows 10 Pro
* Node.js version: 14.16.0
---------------------------
### PDF Generation Code for creating a 600px width PDF file
**HTML markup**
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }

        h1 {
            text-align: right;
            margin: 0;
            background-color: #FF0000;
        }

        @media only screen and (max-width: 599px) {
            h1 {
                text-align: left;
            }
        }
    </style>
</head>
<body>
    <h1>Puppeteer</h1>
</body>
</html>
```
**Node.js Code**
```javascript
const fs = require('fs');
const puppeteer = require('puppeteer');

(async () => {
    // Start: Puppeteer setup
    const browser = await puppeteer.launch({
        headless: true,
        slowMo: 0,
        timeout: 15000,
        ignoreHTTPSErrors: true,
        defaultViewport : {
            width: 500,
            height: 500,
            deviceScaleFactor: 1,
            isMobile: true, // "meta viewport" tag needs to be taken into account
            hasTouch: false,
            isLandscape: false,
        },
        args: ['--no-sandbox', '--disable-setuid-sandbox']
    });

    const page = await browser.newPage();

    const width = 600,
    height = 500;

    await page.setViewport({
        width,
        height
    });

    const htmlContent = fs.readFileSync('./assets/html/index.html', 'utf8');
    await page.setContent(htmlContent);

    await page.emulateMediaType('screen'); // Changes the CSS media type of the page to "screen"
    // End: Puppeteer setup

    // Start: Generate PDF file from html file content
    const pdfOptions = {
        printBackground: true,
        width: `${width}px`,
        height: `${height}px`,
        margin: {
            top: 0,
            right: 0,
            bottom: 0,
            left: 0
        },
        path: './assets/pdf/puppeteer-generated-pdf.pdf',
        scale: 1,
        preferCSSPageSize: true
    }

    await page.pdf(pdfOptions);
    console.log('PDF generated and stored!');
    // End: Generate PDF file from html file content
})();
```


**What is the expected result?**
The text "Puppeteer" should be on right side in the generated PDF file.
![html-page](https://user-images.githubusercontent.com/15952676/110802008-cb7a4480-82a3-11eb-8de4-bbda9a9b5a17.PNG)


**What happens instead?**
The text "Puppeteer" came on left side in the PDF file.
![puppeteer-pdf](https://user-images.githubusercontent.com/15952676/110801720-881fd600-82a3-11eb-9afe-605c80bbf5ac.PNG)


## Following patterns were observed in PDF text alignment when changing screen media query `max-width` CSS property value:

1. If `max-width` is <= **449px**, then text appearing on right side - Working as expected
2. If `max-width` is in between **450px** and **599px**(both inclusive), then text is appearing on left side - Wrong Behavior
3. If `max-width` >= **600px**, then text appearing on left side - Working as expected

Another issue related to this one: #6954 

Thank You