Ignore


#1

The distance from the nav tabs and the bottom grey border is pretty spaced out. I can not get the code to shorten the gap. I have tried using padding and margins, but nothing gets the job done. As you can see I added the bottom border to my nav class. Another problem I am having is the background of the nav li a:hover does not reach the bottom border without me using the padding to get it to reach it.

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

<!-- Header -->
    <div class="header">
        <div class="container">
          	<div class="row">
              	<div class="col-md-3">
                  	<h1>Timelines</h1>
              	</div>
              	<div class="col-md-9">
                  	<ul class="nav nav-tabs pull-right">
                      	<li><a href="#">About</a></li>
                      	<li><a href="#">Our Sources</a></li>
                      	<li><a href="#">Our Team</a></li>
                      	<li><a href="#">Contact Us</a></li>
                  	</ul>
              	</div>
          	</div>
        </div>
    </div>

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

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

<!-- Cards -->
    <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/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">
                    	<img src="https://s3.amazonaws.com/codecademy-content/projects/headlines/p7.jpg">
                  </div>
          </div>
        </div>
    </div>

<!-- Footer -->
    <div class="footer">
      <div class="container">
        <div class="row">
          <div class="align left col-md-4">
            <h2>Headline.</h2>
            <address>1000 7th Avenue<br>
New York, NY<br><abbr title="phone">P:</abbr> (484) 192 - 8372</address>
            <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>
          </div>
        </div>
      </div>
    </div>

  </body>
</html>

html, body {
	padding: 0;
	margin: 0;
	font-family: 'Libre Baskerville', sans-serif;
}
.container {
	max-width: 980px;
}



/* header */
.header {
	font-family: serif;
	padding: 30px 0 60px;
}
.header h1 {
	font-size: 26px;
}
.nav {
	border-bottom: 1px solid #dddddd;
	padding: 4px 0;
}
.nav li {
	display: inline;
	font-size: 18px;
}
.nav li a {
	color: #000;
	margin: 0px;
	border: 0px;
	padding: 25px 20px;
	border-radius: 4px 4px 0 0;
}
.nav li a:hover {
	text-decoration: none;
	background-color: #dddddd;
}

`


#2

reduce the top and bottom px value for .nav li a to reduce the distance between nav tabs and the bottom grey border.
and are you facing any problems with padding for .nav?you can use margin too for .nav li a .


#3

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