Margin creating white space on page

Question

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

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?

Web Page Image

/* 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;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>My Website</title>
  <link rel="stylesheet" href="styles.css" />
  <meta name="viewport" width="device-width" />
</head>

<body>
  <header>
    <div class="container">
      <div id="branding">
        <h1><span id="highlight">Test</span> Web Design</h1>
      </div>
      <nav>
        <ul>
          <li id="current"><a href="Home.html">Home</a></li>
          <li><a href="About.html">About</a></li>
          <li><a href="Contact.html">Contact</a></li>
        </ul>
      </nav>

    </div>

  </header>

  <section id="showcase">
    <div class="container">
      <h1>Affordable Professional Web Design</h1>
      <p>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.
      </p>
    </div>
  </section>

  <section id="newsletter">
    <div class="container">
      <form>
        <h2>Subscribe to our newsletter</h2>
        <input type="email" placeholder="Enter email..." />
        <button type="submit">Submit</button>
      </form>
    </div>
  </section>

  <section class="boxes">
    <div class="container">
      <div class="box">
        <img src="HTML.png" alt="" />
        <h3>HTML Markup</h3>
        <p>In a orci nec nunc posuere placerat. Etiam imperdiet libero ac enim faucibus, ac commodo lacus mollis.</p>
      </div>

      <div class="box">
        <img src="css.png" height="200px" alt="" />
        <h3>CSS3 Styling</h3>
        <p>In a orci nec nunc posuere placerat. Etiam imperdiet libero ac enim faucibus, ac commodo lacus mollis.</p>
      </div>

      <div class="box">
        <img src="graphic_design.svg" height="300px" alt="" />
        <h3>Graphic Design</h3>
        <p>In a orci nec nunc posuere placerat. Etiam imperdiet libero ac enim faucibus, ac commodo lacus mollis.</p>
      </div>
    </div>


  </section>


</body>

score 0 · Answer 1 · answered Jun 27 '18 at 18:44

0

Instead of margin try using padding:

#showcase h1{
    padding:100px 30px 30px 30px;
    text-align:center;
    color:#ffffff;
    font-size:50px;
}

answered Jun 27 '18 at 18:44

August

2,045
10
23

Margin creating white space on page

1 Answers1