<body>
    <span class="section-name">body</span>
    <header>
        <span class="section-name">header</span>
        <nav>
            <span class="section-name">nav</span>
        </nav>
    </header>
    <main>
        <span class="section-name">main</span>
      <section id="navsection">
        <span class="section-name">section</span>
        <header>
            <span class="section-name">header</span>
        </header>
        <nav>
            <span class="section-name">nav</span>
        </nav>
    </section>
    <section id="articlesection">
        <span class="section-name">section</span>
        <header>
            <span class="section-name">header</span>
        </header>
        <article id="aside-article">
            <span class="section-name">article</span>
            <header>
                <span class="section-name">header</span>
            </header>
          <aside>
                <span class="section-name">aside</span>
            </aside>
            <p>
                <span class="section-name">p</span>
                <code><span class="section-name">code</span></code>
            </p>
            <p>
                <span class="section-name">p</span>
            </p>
            
            <footer>
                <span class="section-name">footer</span>
            </footer>
        </article>
        <article>
            <span class="section-name">article</span>
            <header>
                <span class="section-name">header</span>
            </header>
            <p>
                <span class="section-name">p</span>
            </p>
            <p>
                <span class="section-name">p</span>
            </p>
            <footer>
                <span class="section-name">footer</span>
            </footer>
        </article>
    </section>
    
    </main>
    <footer>
        <span class="section-name">footer</span>
    </footer>
</body>
</html>
body {
  min-height: 100vh;
  background-color: rgb(0,0,0,0.2);
  border: 2px dashed;
  text-align: center;
  padding: 5px;
}
header {
  background-color: rgb(0,0,0,0.1);
  border: 2px dashed;
  
  padding: 0px;
  margin-bottom: 5px;
}
nav {
  background-color: rgb(0,0,0,0.1);
  border: 2px dashed;
  margin-bottom: 0px;
}
main {
  background-color: rgb(0,0,0,0.1);
  border: 2px dashed;
  position: relative;
  padding: 5px;
}
section {
  background-color: rgb(0,0,0,0.1);
  border: 2px dashed;
  padding: 5px;
  margin: auto;
}
article {
  background-color: rgb(0,0,0,0.1);
  border: 2px dashed;
  margin-bottom: 5px;
}
p {
  background-color: rgb(0,0,0,0.1);
  border: 2px dashed;
  padding: 10px;
  margin: 5px 10px
}
aside {
  background-color: rgb(0,0,0,0.1);
  border: 2px dashed;
  width: 30%;
  height: 120px;
  margin: 5px 5px;
  float: right;
}
footer {
   background-color: rgb(0,0,0,0.1);
  border: 2px dashed;
  
}
#aside-article p{
  width: 65%;
  margin-left: 5px;
}
#articlesection {
  width: 70vw;
  
}
#navsection {
  width: 22vw;
  left: 75%;
  float: right;
  margin: auto;
}
#navsection nav {
  height: 300px;
}
#articlesection {
  margin: auto 24vw auto auto;
}
.section-name {
  display: block;
  width: 100%;
  padding: 5px;
}
code {
  display: block;
  width: 200px;
  margin: auto;
  margin-bottom: 5px;
  background-color: #696969 !important;
  color: #fff;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.