Basic HTML and CSS banner : <p>With the example HTML / CSS below, I cannot work out why this doesnt display the expected results in any browser (hosted in Visual Studio), however works perfectly when done as a <a href="https://jsfiddle.net/nyLxuL2y/" rel="nofollow noreferrer">JSFiddle</a>. I'm probably missing something pretty obvious, but can anyone point out what that might be?</p>

<p>HTML:</p>

<pre><code>&lt;body&gt;
    &lt;div class="wrapper"&gt;
        &lt;div class="navbar"&gt;
            &lt;p&gt;Random white text which should appear in a grey banner at the top of the page.&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
</code></pre>

<p>CSS:</p>

<pre><code>body {
    width: 100%;
    margin: 0;
}
.wrapper {
    display: table;
    width: 100%;
}
.navbar {
    width: 100%;
    height: 200px;
    background-color: #292929;
    color: #ffffff;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
}
</code></pre>

<p>EDIT: I have tried this in various different browsers, including Firefox, Direfox Dev Edition, Edge, and IE, all with the same results (just plan black text on white screen).</p>
