The links at the top of my page sit above the grey line

<PLEASE USE THIS TEMPLATE TO HELP YOU CREATE A GREAT POST!>

<Below this line, add a link to the EXACT exercise that you are stuck at.>
Stuck on the project named Headlines.

<Below this line, in what way does your code behave incorrectly? Include ALL error messages.>
In the top right where the links and nav tabs are, when I mouse over the tabs, the grey area sits above the grey line. Why is there a space and what do I need to do to remove it?

```

Replace this line with your code.

<do not remove the three backticks above>

@clairejohnstone,
Could you give the FULL HTML & CSS code you are using …

```

My HTML code

<do not remove the three backticks above>

My CSS Code:

.header a {
  color: black;
  margin: 0 auto;
}

@clairejohnstone,
Please the
#FULL HTML & CSS

```

My HTML code
<!doctype html>

<div class="header">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <h1>Headlines.</h1>
      </div>
      <div class="col-md-6">
        <ul class="nav nav-tabs pull-right">
          <li role="presentation"><a href="#">About</a></li>
          <li role="presentation"><a href="#">Our Services</a></li>
          <li role="presentation"><a href="#">Our Team</a></li>
          <li role="presentation"><a href="#">Contact Us</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div class="jumbotron">
  <div class="container">
    <h2>We <span>collect and curate</span><br>
      articles, opinions, and images <br>
      from around the world.</h2>
  </div>
</div>

<div class="banner">
  <div class="container">
    <h2>The Bottom Line.</h2>
    <p>We deliver the news that is relevant to you</p>
  </div>
</div>    

<div class="cards">
  <div class="container">
    <h2>Our Expertise.</h2>
    <div class="row">
      <div class="col-md-4"><img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p1.jpg" />
        <img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p2.jpg" />
        <img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p3.jpg" />
      </div>
      
      <div class="col-md-4"><img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p6.jpg" />
      <img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p5.jpg" />
      <img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p4.jpg" />
      </div>
      
      <div class="col-md-4">
      <img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p7.jpg" />
      <img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p8.jpg" />
      <img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p9.jpg" />
      <img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p10.jpg" /></div>
    </div>
  </div>
</div>    

<div class="footer">
  <div class="container">
    <div class="row">
      <div class="col-md-3">
        <h3>Headlines.</h3>
        <address>
          1000 7th Avenue<br>
          New York, NY<br>
          (484) 192 - 8372<br>
          <a href="#"><img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/email.svg" /></a>
          <a href="#"><img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/fb.svg" /></a>
          <a href="#"><img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/twitter.svg" /></a>
       </address>
      </div>
    </div>
  </div>
</div>
<do not remove the three backticks above>

My CSS code:

html, body {
margin: 0;
padding: 0;
font-family: ‘Libre Baskerville’, sans-serif;
}

.container {
max-width: 980px;
margin: 0 auto;
}

.jumbotron {
background-color: transparent;
}

.jumbotron span {
color: #ffc200;
}

.jumbotron h2 {
font-size: 50px;
padding: 40px;
}

@media (max-width: 992px) {
.col-md-4 {
margin: 0 auto 0;
text-align: center;
width: 100%;
}
.cards img {
width: 60%;
}
}

@media (max-width: 500px) {
.header h1 {
text-align: center;
}

.nav li {
text-align: center;
width: 100%;
margin: 0 auto;
}

.cards img {
width: 100%;
}
}

.header a {
color: black;
margin: 0 auto;
}

.banner {
background-color: #333;
color: white;
text-align: center;
padding: 20px;
}

.cards {
background-color: #FFC200;
text-align: center;
padding: 60px;
}

.cards h2 {
padding: 40px;
}

.cards img {
margin-bottom: 40px;
}

.footer {
background-color: black;
color: white;
padding: 40px;
font-size: 11px;
padding: 10px;
}

.footer img {
height: 20px;
margin: 5px;
}

.footer h3 {
font-size: 18px;
}

html, body {
margin: 0;
padding: 0;
font-family: ‘Libre Baskerville’, sans-serif;
}

.container {
max-width: 980px;
margin: 0 auto;
}

.jumbotron {
background-color: transparent;
}

.jumbotron span {
color: #ffc200;
}

.jumbotron h2 {
font-size: 50px;
padding: 40px;
}

@media (max-width: 992px) {
.col-md-4 {
margin: 0 auto 0;
text-align: center;
width: 100%;
}
.cards img {
width: 60%;
}
}

@media (max-width: 500px) {
.header h1 {
text-align: center;
}

.nav li {
text-align: center;
width: 100%;
margin: 0 auto;
}

.cards img {
width: 100%;
}
}

.header a {
color: black;
margin: 0 auto;
}

.banner {
background-color: #333;
color: white;
text-align: center;
padding: 20px;
}

.cards {
background-color: #FFC200;
text-align: center;
padding: 60px;
}

.cards h2 {
padding: 40px;
}

.cards img {
margin-bottom: 40px;
}

.footer {
background-color: black;
color: white;
padding: 40px;
font-size: 11px;
padding: 10px;
}

.footer img {
height: 20px;
margin: 5px;
}

.footer h3 {
font-size: 18px;
}

@clairejohnstone
IMHO you will have to use an expanded

.nav li {
 text-align: center;
 width: 100%;
 margin: 0 auto;
 padding: 0px; 
}

Found articles using google search
== discussions / opinions ==
bootstrap removing whitespace site:stackoverflow.com
http://stackoverflow.com/questions/30437209/removing-white-space-in-bootstrap
css margin padding site:stackoverflow.com

Thanks for your help.

I found out that I needed to have CSS code that looked like this

.nav {
padding-bottom: 0px;
}

It is something to do with the way the bootstrap was coded for that particular project.

Thanks again for your input and help

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