<h2>The main content <code>div</code> is not nested here.</h2>
<div class="container-box">
  This text is directly inside the parent <code>div</code> element.
  <p>This is the first paragraph of our container.</p>
  <p>The second paragraph contains a link to <a href="http://en.wikipedia.org/">WikiPedia</a>, the free encyclopedia.</p>
  <p>I have also included a link to SitePoint as a direct child of the containing <code>div</code> element.</p>
  <a href="https://www.sitepoint.com/">A Link to SitePoint.</a>
</div>

<h2>The main content <code>div</code> is nested inside another <code>div</code>.</h2>
<div>
<div class="container-box">
  This text is directly inside the parent <code>div</code> element.
  <p>This is the first paragraph of our container.</p>
  <p>The second paragraph contains a link to <a href="http://en.wikipedia.org/">WikiPedia</a>, the free encyclopedia.</p>
  <p>I have also included a link to SitePoint as a direct child of the containing <code>div</code> element.</p>
  <a href="https://www.sitepoint.com/">A Link to SitePoint.</a>
</div>
</div>
body {
  font-family: 'Lato';
  margin: 50px 20px;
}

.container-box {
  border: 1px solid black;
  padding: 10px;
  background: wheat;
}

div {
  margin-bottom: 80px;
}

div {
  font-size: 1.2em;
}

code {
  font-size: 0.9em;
}

p, a {
  font-size: 1em;
}

Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.