CSS Issue with headers

HTML & CSS
1

My header has some space which is not needed around it

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">
    <title>Acme Website Design | Welcome</title>
    <link rel="stylesheet" type="text/css" href="Website3.css"

  </head>
  <body>
    <header>
      <div class="container">

        <div id="branding">
          <h1>Acme Web Design</h1>
        </div>

        <nav>
          <ul>
            <li><a href="Website3.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="services.html">Services</a></li>
          </ul>
        </nav>
      </div>
    </header>

    <section id="showcase">
      <div class="container">
        <h1>Affordable and Professional webdesign</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </section>

    <section id="newsletter">
      <div class="container">
        <h1>Subscribe To Our Newsletter</h1>
        <form>
          <input type="email" placeholder="Enter Email">
          <button type="submit" class="button_1">Subscribe</button>
        </form>
      </div>
    </section>

    <section id="boxes">
      <div class="container">

        <div class="box">
          <img src="logo_html.png">
          <h3>HTML 5 Markup</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>

        <div class="box">
          <img src="logo_css.png">
          <h3>CSS 3 styling</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>

        <div class="box">
          <img src="logo_brush.png">
          <h3>Designing</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
    </section>

    <footer>
      <p>Acme Web Design Copyright &copy; 2018</p>
    </footer>

  </body>
</html>

CSS

body{
  font: 15px/1.5 arial,helvetica,sans-serif;
  background: #f4f4f4;
}
/*global*/
.container{
  width: 80%;
  margin:0 auto;
}

/*header*/
header{
  background: #35424a;
  color: #ffffff;
}

Screenshot:

Screenshot_1
Screenshot_11365Ă—262 39.7 KB

I want no space around the header. How can I do it?

2

Try setting the margin and padding on your body to 0.

3

I set the margin and padding to 0 but there is still space on the top.
Screenshot:

Screenshot_2
Screenshot_21365Ă—389 57.7 KB

Here is the new CSS:

body{
  font: 15px/1.5 arial,helvetica,sans-serif;
  background: #f4f4f4;
  margin:0;
  padding: 0;
}
/*global*/
.container{
  width: 80%;
  margin:0 auto;
}

/*header*/
header{
  background: #35424a;
  color: #ffffff;
}

No change has been made to the HTML.
thanks

4

You don’t show all the relevant HTML, but I am assuming you have an <h1> in your header. You probably need to set the top margin of your h1 to 0.

1 Like
5

All the relevant html is there the top of the thread.
setting margin-top:0; is not working.
thanks.

6

It works for me setting margin: 0 on body and margin-top: 0 on the (first) h1.

BTW, you’re missing the closing bracket here:

<link rel="stylesheet" type="text/css" href="Website3.css"

2 Likes
7

Have you assigned: ul {margin:0} and h1 {margin:0;} ?

When you post a trouble report, please include ALL relevent HTML and ALL of the CSS that works with the HTML. You have not included the CSS for the items within the header.

Please read our posting guidelines:

Forum POSTING BASICS: (Help us help you!)

If you do not wish to post a link to your site, then create a cut down “working page” that demonstrates the problem and include that working page in a post.

Please let us know what you find if you fix it. We appreciate feedback.

2 Likes
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.