title: how to make the circle div left center without moving the other parts?
body: <p>Hey I'm really new to this so please tell me if I'm doing it the stupid way.</p>
  
  <p>I'm trying to make a site look like this</p>
  
  <p><img src="https://i.stack.imgur.com/OmDhw.png" alt="http://imgur.com/8actm48">
  But the best I ended up with is this (if I use margin-top, it would just drag the whole body part down)</p>
  
  <p><img src="https://i.stack.imgur.com/zI9Eb.png" alt="http://imgur.com/gBgyWPK"></p>
  
  <hr>
  
  <p>this is the body of the HTML</p>
  
  <pre><code>&lt;div id="container"&gt;        
  
      &lt;div id="header"&gt;&lt;h1&gt;Game Course Weekly&lt;/h1&gt;&lt;/div&gt;
  
      &lt;div id="nav"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt; WEEK 1 &lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt; WEEK 2 &lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt; WEEK 3 &lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt; WEEK 4 &lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt; WEEK 5 &lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt; WEEK 6 &lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt; WEEK 7 &lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
  
      &lt;/div&gt;
  
      &lt;div id="body"&gt;
          &lt;div class="circle"&gt;
              &lt;p&gt; MON &lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="content"&gt;
              &lt;div class="content-block"&gt;
                  &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised &lt;/p&gt;
              &lt;/div&gt;
              &lt;hr&gt;
              &lt;div class="content-block"&gt;
                  &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised &lt;/p&gt;
              &lt;/div&gt;
              &lt;hr&gt;
              &lt;div class="content-block"&gt;
                  &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised &lt;/p&gt;
              &lt;/div&gt;
              &lt;hr&gt;
              &lt;div class="content-block"&gt;
                  &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised &lt;/p&gt;
              &lt;/div&gt;
              &lt;hr&gt;
              &lt;div class="content-block"&gt;
                  &lt;p&gt;Nothing to do here&lt;/p&gt;
              &lt;/div&gt;              
          &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;div id="footer"&gt;
          &lt;div class="copyright"&gt; Copyrights © 2014. All rights reserved &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>and this is the css </p>
  
  <pre><code>* {
      margin: 0;
      padding: 0;
  }
  
  #container {
      margin: 0 auto;
      width : 900px;
  }
  
  #header {
      text-align: center;
      margin: 20px auto;
      font-family: 'Ubuntu', Lucida Sans Console, sans-serif;
      font-size: 30px;
  }
  
  #nav {
      background: linear-gradient(to bottom, #01afa1, #106760);
      margin-top: 30px;
      border-top-left-radius: 6px;
      border-top-right-radius: 6px;
  }
  
      #nav ul {
          list-style: none;
          text-align: center;
      }
  
          #nav li {
              display: inline-block;
              text-align: center;
              font-family: 'Open Sans', Lucida Sans Console, sans-serif;
              font-size: 18px;
              margin: 18px 30px;
  
          }
  
          #nav li a {
              color: #FFFFFF;
              text-decoration: none;
          }
  
          #nav li:hover a {
              position: relative;
              top: 1px;
              left: 1px;
              border-color: #000 #aaa #aaa #000;
              text-shadow: 4px 4px 5px #000000;
              -webkit-transition: all 0.25s linear;
              -o-transition: all 0.25s linear;
              -moz-transition: all 0.25s linear;
              -ms-transition: all 0.25s linear;
              -kthtml-transition: all 0.25s linear;
              transition: all 0.25s linear;
          }
  
  #body {
      background: #0c0a0a;
      width: 900px;
      margin: 0 -20px 0 0;
  }
      .circle {
          position: relative;
          width: 70px;
          height: 70px;
          margin-left: -35px;
          border-radius: 50%;
          background: #0ec1a1; 
          position: relative;
          line-height: 70px;
          font-size: 20px;
          color: #FFFFFF;
          text-align: center;
          font-family: 'Ubuntu', sans-serif;
      }
  
      .content {
          margin: 0;
      }
          .content-block {
              height: 185px;
              font-family: 'Open Sans', Lucida Sans Console, sans-serif;
              color: #FFFFFF;
              position: relative;
              font-size: 17px;
              text-align: justify;
              margin: 0 60px 0 60px;
              padding: 5px 0 5px 0;
          }
  
          .content-block p {
             margin: 0;
             position: absolute;               
             top: 50%;                         
             transform: translate(0, -50%) 
          }
  </code></pre>
  
  <hr>
  
  <p>What can I do to make the circle position like desired without ruining other parts?</p>