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


#1


Stuck on the project named Headlines.


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. 
<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>


#2

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


#4


My HTML code
   <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>

My CSS Code:

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


#5

@clairejohnstone,
Please the

FULL HTML & CSS


#6


**My HTML code**
   <!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
    <link href='https://fonts.googleapis.com/css?family=Libre+Baskerville:400,700,400italic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>

    <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>

  </body>
</html>


#7

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


#8

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


#9

@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


#10

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


#11

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