<!-- Header -->
<header class="header">
  <h1>tinybreaddog.com</h1>
</header>

<!-- 
When we float elements
We need a container with clearfix
-->
<div class="container clearfix">

  <!-- Main Content -->
  <section class="main-content">
  <h2>Welcome to my website</h2>
    <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo voluptas sit odit aut fugit, sed quia tur magni dolores eos qui ratione voluptatem sequi nesciunt."</p>
  </section>

  <!-- Sidebar -->
  <aside class="sidebar">
  <img src="https://i.ytimg.com/vi/QhkWfxFpq-w/hqdefault.jpg">
  </aside>
</div>


<!-- Footer -->
<footer class="footer container">@tinybreaddog -2000</footer>
/* apply a natural box layout model to all elements, but allowing components to change */

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

/*
Properly calculates the height of the containing element with elements floated inside.
*/
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/*
Remove default margin on Body
*/
body{
  margin: 0;
  font-family: arial, helvetica;
  font-size: 0.85em;
}

/*
Assign a background color to
.header
.main-content
.sidebar
.footer
*/
.header,
.footer{
  background: #592310;
  color: #fff;
}

/*
Center Components inside
At a max width of
*/
.container{
  max-width: 400px;
  margin: 0 auto;
}



/*
Set visual heights to visualize
*/
.header{
  padding: 2%;
}
.header h1{
  text-align: center;
  margin: 0;
}



.main-content{
  padding: 2%;
  color:#592310;
}
.main-content h2{
  margin-top: 0;
}
.main-content p:last-child{
  margin-bottom: 0;
}



.sidebar img{
  max-width: 100%;
}



.footer{
  padding: 1%;
  text-align: center;
}


/*
At 400px wide float the main content and sidebar beside eachother
*/
@media screen and (min-width: 400px){
  .main-content{
    width: 70%;
    float: left;
  }
  .sidebar{
    width: 29%;
    float: right;
  }
  /*
  Load in a background image once there's enough room.
  */
  body{
    background: url(https://upload.wikimedia.org/wikipedia/commons/6/6c/Toast-2.jpg) 50% 1%;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.