title: Unknown white border around my content
body: <p>I've created an utterly simple page with only a few elements. I have a white border around my 'content div' and can't figure out what is causing it. It is appearing only top and left of my content. I've tried removing it with .body { border: 0; }, but that did not help. Also a few other things with regard to my CSS, but solved it.</p>
  
  <p>Here is my HTML code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang='en'&gt;
  
  &lt;head&gt;
      &lt;meta charset='UTF-8' /&gt;
      &lt;title&gt;Olivera Miletic graphic desig&lt;/title&gt;
      &lt;link rel='stylesheet' href='style.css' /&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;div class="mainText"&gt;
              &lt;p&gt; OLI&lt;span class="secondColor"&gt;APPARENTLY &lt;/p&gt;
               &lt;p class="stayTuned"&gt; SOON. STAY TUNED. &lt;/p&gt;
            &lt;/div&gt;
                    &lt;div&gt;
                        &lt;p class="meanWhile"&gt; meanwhile &lt;a href="http://www.oliveramiletic.com" target="_blank"&gt; WORK &lt;/a&gt; / &lt;a href="https://www.behance.net/olivera_m" target="_blank"&gt; BE &lt;/a&gt; / &lt;a href="https://twitter.com/oliapparently" target="_blank"&gt; TW &lt;/a&gt; / &lt;a href="mailto:miletic.olivera@gmail.com" &gt; MAIL &lt;/a&gt;
                        &lt;/p&gt;
                   &lt;/div&gt;
            &lt;/div&gt;
        &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>Here is my CSS:</p>
  
  <pre><code>.container {
      position: absolute;
      width: 100%;
      height: 100%;
      overflow:hidden;
      background-color: #6600cc;
      padding: 20px 0px 0px 50px;
      display: box;
  }
  
  .body {
      margin: 0;
  }
  
  .mainText {
      font-family: 'Open Sans', sans-serif;
      font-size: 64px;
      color: #FF0066;
      font-weight: bolder;
      line-height: 0%;
      margin-bottom: 70px;
  
  }
  
  .secondColor {
      color: #00ccff;
  }
  
  .stayTuned {
      font-family: 'Open Sans', sans-serif;
      font-size: 25px;
      color: #ffffff;
      font-weight: bolder;
  }
  
  .meanWhile {
      font-family: 'Open Sans', sans-serif;
      color: #ffffff;
      font-weight: lighter;
  }
  
  a {
    color: #ffffff;
    text-decoration: none; 
  }
  </code></pre>
  
  <p>Here is the JSFiddle <a href="https://jsfiddle.net/1yL1ta5x/" rel="nofollow noreferrer">https://jsfiddle.net/1yL1ta5x/</a> and the code:</p>
  
  <p>Also, would appreciate advice how to optimize it for, at least, mobile and desktop views of the webpage and/or any other optimization to my code is welcome. I am an absolute beginner, so bear with me. Thanks.</p>
  
  <p>Regards,</p>