title: Margin creating white space on page
body: <p>I am trying to create a space above "Affordable Professional Web Design" in the image below, so that it creates a space which is occupied by the image</p>
  
  <p>However when I do so, it only seems to push the image down and leaves white space (indicated in red). I am trying to do this by applying margin-top although cannot find a resolution. Any ideas how to resolve?</p>
  
  <p><a href="https://i.stack.imgur.com/dblPL.jpg" rel="nofollow noreferrer">Web Page Image</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Global */
  
  .container {
    width: 80%;
    margin: auto;
    overflow;
    hidden;
  }
  
  body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
  }
  
  ul {
    margin: 0;
    padding: 0;
  }
  
  
  /* Header */
  
  header {
    background-color: #35424a;
    border-bottom: orange solid;
    min-height: 70px;
    padding-top: 30px;
    color: #ffffff;
  }
  
  header #branding {
    float: left;
  }
  
  header #branding h1 {
    margin: 0;
  }
  
  header li {
    float: left;
    list-style: none;
    padding: 0 10px 0 10px;
  }
  
  header nav {
    float: right;
    text-transform: uppercase;
  }
  
  header a {
    text-decoration: none;
    color: #ffffff;
  }
  
  #highlight,
  #current a {
    color: #e8491d;
  }
  
  nav a:hover {
    color: orange;
  }
  
  
  /* Showcase */
  
  #showcase {
    min-height: 400px;
    background: url('../countryside.jpg') no-repeat;
    background-size: cover;
    text-align: center;
    color: #ffffff;
  }
  
  #showcase h1 {
    margin-top: 100px;
    padding: 30px;
    text-align: center;
    color: #ffffff;
    font-size: 50px;
  }
  
  #showcase p {
    text-align: center;
    color: #ffffff;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8" /&gt;
    &lt;title&gt;My Website&lt;/title&gt;
    &lt;link rel="stylesheet" href="styles.css" /&gt;
    &lt;meta name="viewport" width="device-width" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;header&gt;
      &lt;div class="container"&gt;
        &lt;div id="branding"&gt;
          &lt;h1&gt;&lt;span id="highlight"&gt;Test&lt;/span&gt; Web Design&lt;/h1&gt;
        &lt;/div&gt;
        &lt;nav&gt;
          &lt;ul&gt;
            &lt;li id="current"&gt;&lt;a href="Home.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="About.html"&gt;About&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="Contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/nav&gt;
  
      &lt;/div&gt;
  
    &lt;/header&gt;
  
    &lt;section id="showcase"&gt;
      &lt;div class="container"&gt;
        &lt;h1&gt;Affordable Professional Web Design&lt;/h1&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget nulla molestie, dictum purus vel, dapibus turpis. Aliquam malesuada laoreet ante. Integer dictum ipsum sed arcu commodo laoreet ultrices ac est. Nullam sagittis eget arcu nec
          mollis.
        &lt;/p&gt;
      &lt;/div&gt;
    &lt;/section&gt;
  
    &lt;section id="newsletter"&gt;
      &lt;div class="container"&gt;
        &lt;form&gt;
          &lt;h2&gt;Subscribe to our newsletter&lt;/h2&gt;
          &lt;input type="email" placeholder="Enter email..." /&gt;
          &lt;button type="submit"&gt;Submit&lt;/button&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    &lt;/section&gt;
  
    &lt;section class="boxes"&gt;
      &lt;div class="container"&gt;
        &lt;div class="box"&gt;
          &lt;img src="HTML.png" alt="" /&gt;
          &lt;h3&gt;HTML Markup&lt;/h3&gt;
          &lt;p&gt;In a orci nec nunc posuere placerat. Etiam imperdiet libero ac enim faucibus, ac commodo lacus mollis.&lt;/p&gt;
        &lt;/div&gt;
  
        &lt;div class="box"&gt;
          &lt;img src="css.png" height="200px" alt="" /&gt;
          &lt;h3&gt;CSS3 Styling&lt;/h3&gt;
          &lt;p&gt;In a orci nec nunc posuere placerat. Etiam imperdiet libero ac enim faucibus, ac commodo lacus mollis.&lt;/p&gt;
        &lt;/div&gt;
  
        &lt;div class="box"&gt;
          &lt;img src="graphic_design.svg" height="300px" alt="" /&gt;
          &lt;h3&gt;Graphic Design&lt;/h3&gt;
          &lt;p&gt;In a orci nec nunc posuere placerat. Etiam imperdiet libero ac enim faucibus, ac commodo lacus mollis.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
  
    &lt;/section&gt;
  
  
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>