Why won't the spacing around my header go away?

Question

I am trying to remove the spacing around the teal box in the header. I want the bottom line to match up with the bottom of the teal box. Here is a picture of what I am trying to achieve what my goal is, followed by my code:

.

#wrap {
  margin: 0 auto;
  width: 960px;
  text-align: center;
}

body {
  margin: 0 auto;
  width: 960px;
}

#firstName {
  color: white;
  background-color: #4aaaa5;
  width: 300px;
  height: 85px;
  float: left;
  font-family: Georgia, 'Times New Roman', Times, serif;
  line-height: 250%;
  text-align: center;
}

#menu {
  color: #777777;
  background-color: white;
  width: 300px;
  height: 85px;
  font-family: Georgia, 'Times New Roman', Times, serif;
  float: right;
  line-height: 125px;
}

hr {
  margin: 0, 0, 0, 0;
  clear: both;
}

img {
  width: 200px;
  height: 200px;
}

#aboutMe {
  clear: both;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Rob Connolly's Portfolio</title>
  <link rel="stylesheet" href="/Users/georgeconnolly/Desktop/ucsd-bootcamp/homework-trial/style.css">
</head>

<div id="wrap">
  <header>
    <h1 id="firstName">

      Rob Connolly

    </h1>

    <div id="menu">

      <span>
            About  &nbsp;
            </span>

      <span>
            Portfolio  &nbsp;
            </span>

      <span>
            Contact  &nbsp;
            </span>

    </div>

</div>

</header>
<hr>

<body>

  <div id="aboutMe">

    <h2>
      About Me
    </h2>

    <img src="/Users/georgeconnolly/Desktop/ucsd-bootcamp/homework/assets/images/rob-connolly.jpg" alt="rob connolly photo">

    <p>
      Welcome to my portfolio page. I would first like to say that I appreciate you taking the time to learn a little bit about who I am. I would describe myself as someone who has a "whatever it takes to get the job done right" outlook. For someone reason,
      it is something I was born with. No matter how large the barrier is to complete the job, I will get my project to the finish line! For example, before my wife and I got married, we needed to build a substantial budget to put on a wedding without
      depleting our savings. I told my girlfriend at the time, wife now, I will find a way to fund this whole wedding in 90 days. I accomplished that goal with 10 days to spare, $25,000. It all started with buying and selling 1100 pairs of women's shoes
      in 72 hours. Check out the pictures HERE.
    </p>

    <p>
      Something that sets me apart as a developer is, I look at things as an entrepreneur. I have founded 2 companies, bootstrapped them to scale, and I have had successful exits. I always try and build things in a manner that fits the project. I want to see
      my code help your business scale.
    </p>

    <p>
      If you have any more questions about me, my experience, or how many games is Notre Dame going to win in Football, please use the contact form above.
    </p>

  </div>
  <p>
    Copyright &copy;
  </p>


</body>

</html>

Hi @robC, please, provide your code in a way that we can reproduce it quickly. you can use https://jsfiddle.net/ so we can quickly test the code and provide you answers. You are also referencing a CSS file from your own computer. unfortunately, it won't work here. — Bruno Paulino, Dec 16 '19 at 19:24
@BrunoPaulino No need for jsFiddle since questions can have embedded, runnable examples using stack snippets. — j08691, Dec 16 '19 at 19:41

score 1 · Answer 1 · answered Dec 16 '19 at 19:32

First, you should move your <header> to inside your <body>. Second, you can remove the margin for #firstName by adding margin: 0 to the selector:

#firstName {
  margin: 0;
}

Then, you can use Flexbox on #menu to center your menu vertically:

#menu {
  /* Adds Flexbox to element */
  display: flex; 

  /* Aligns the menu's children horizontally, putting equal 
     spacing between each child  */
  justify-content: space-between;

  /* Aligns the menu's children vertically */
  align-items: center;
}

#wrap {
  margin: 0 auto;
  width: 960px;
  text-align: center;
}

body {
  margin: 0 auto;
  width: 960px;
}

#firstName {
  /* Remove margin from the div */
  margin: 0;
  color: white;
  background-color: #4aaaa5;
  width: 300px;
  height: 85px;
  float: left;
  font-family: Georgia, 'Times New Roman', Times, serif;
  line-height: 250%;
  text-align: center;
}

#menu {
  color: #777777;
  background-color: white;
  width: 300px;
  height: 85px;
  font-family: Georgia, 'Times New Roman', Times, serif;
  float: right;
  line-height: 125px;
  
  /* Add Flexbox to your menu*/
  display: flex;
  justify-content: space-between;
  align-items: center;
}

hr {
  margin: 0, 0, 0, 0;
  clear: both;
}

img {
  width: 200px;
  height: 200px;
}

#aboutMe {
  clear: both;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Rob Connolly's Portfolio</title>
  <link rel="stylesheet" href="/Users/georgeconnolly/Desktop/ucsd-bootcamp/homework-trial/style.css">
</head>

<body>

  <div id="wrap">
    <header>
      <h1 id="firstName">Rob Connolly</h1>
      <div id="menu">
        <span>About  &nbsp;</span>
        <span>Portfolio  &nbsp;</span>
        <span>
            Contact  &nbsp;
        </span>
      </div>
    </header>
  </div>
  <hr>
  <div id="aboutMe">

    <h2>
      About Me
    </h2>

    <img src="/Users/georgeconnolly/Desktop/ucsd-bootcamp/homework/assets/images/rob-connolly.jpg" alt="rob connolly photo">

    <p>
      Welcome to my portfolio page. I would first like to say that I appreciate you taking the time to learn a little bit about who I am. I would describe myself as someone who has a "whatever it takes to get the job done right" outlook. For someone reason,
      it is something I was born with. No matter how large the barrier is to complete the job, I will get my project to the finish line! For example, before my wife and I got married, we needed to build a substantial budget to put on a wedding without
      depleting our savings. I told my girlfriend at the time, wife now, I will find a way to fund this whole wedding in 90 days. I accomplished that goal with 10 days to spare, $25,000. It all started with buying and selling 1100 pairs of women's shoes
      in 72 hours. Check out the pictures HERE.
    </p>

    <p>
      Something that sets me apart as a developer is, I look at things as an entrepreneur. I have founded 2 companies, bootstrapped them to scale, and I have had successful exits. I always try and build things in a manner that fits the project. I want to see
      my code help your business scale.
    </p>

    <p>
      If you have any more questions about me, my experience, or how many games is Notre Dame going to win in Football, please use the contact form above.
    </p>

  </div>
  <p>
    Copyright &copy;
  </p>


</body>

</html>

Thank you so much! I am going to read about the Flexbox. Made a big difference! Thanks again @khan! — RobC, Dec 16 '19 at 21:42

Why won't the spacing around my header go away?

1 Answers1