Q:

Does the browser resemble what it will look like on a small mobile device? After resizing the browser?

If I resize the browser window the inner divs don't remain consistent with the wrapper div.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
    #wrapper {
                border:2px solid red;
    }

    .pc {
        display:inline-block;
        vertical-align: top;
        width:32%;
        border:2px solid blue;
        text-align: center;
    }
</style>
</head>
<body>
    <div id="wrapper" >
        <div class="pc" >
            <h2>Heading 1</h2>
            <p>commodo consequat. Duis aute irure dolor in reprehende </p>
        </div>          

        <div class="pc" >
            <h2>Heading 2</h2>
            <p>cupidatat non proident, sunt in culpa qui officia mollit</p>
        </div>

        <div class="pc" >
            <h2>Heading 3</h2>
            <p>cupidatat non proident, sunt in culpa qui officia deser</p>
        </div>      
</div>

Here are sample pics of what happens when I resize browser window Chrome and Firefox, I haven't tried other browsers. The border gap in the border width is what I am referring to. I'm not looking for another solution like centering but more curious as to why this happens.
 

A:

Because you have the width of your .pc divs to 32%, and 32 + 32 + 32 = 96. So you are seeing the extra 4% gap on the right, which will be wider on larger screens and very thin on smaller screens.
Also, you are not using box-sizing: border-box; so your border widths are not calculated into your overall width. So the width of 1 .pc is actually 32% + 2px right border + 2px left border.

