Why is there a gap between my banner image and navigation bar?

Question

I'm not sure why, but there is a small gap between my nav bar and the banner image on top. I've tried checking if I had some kind of padding or margins on the elements that would be causing it, but I can't identify anything wrong.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html" charset="utf- 
8"/>
        <meta name="viewport" content="width=device-width, initial- 
scale=1.0"/>
        <title>Pierce Productions</title>
        <link rel="stylesheet" href="reset.css" type="text/css" 
media="screen"/>
        <link rel="stylesheet" href="style.css" type="text/css" 
media="screen"/>
        <script src="scripts\modernizr.min.js"></script>
        <script src="scripts\respond\dest\respond.min.js"></script>
        <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
        <script type="text/javascript">window.jQuery || 
document.write('<script type="text\/javascript" src="js\/1.7.2.jquery.min"> 
<\/script>')</script>
        <script src="scripts\prefixfree\prefixfree.min.js"></script>
        <script src="scripts\slick\slick\slick.min.js"></script>
    </head>
    <body>
      <header>
        <img src="images\banner.png" class="banner">
        <nav>
          <div class="color">
           <div class="table">
            <ul>
              <li><a class="active" href="main.html">Home</a></li>
              <li><a href="albums.html">Albums</a></li>
              <li><a href="buy.html">Store</a></li>
              <li><a href="about.html">About</a></li>
            </ul>
          </div>
         </div>
        </nav>
      </header>
    </body>
</html>

CSS:

*Global Styles*/
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  overflow: hidden;
}
/*Header Section*/
header {
  position: relative;
  width: auto;
  max-width: 900px
  background-color: black;
  height: auto;
}

nav ul {
  width: 100%;
  height: 63px;
  background-color: black;
  list-style: none;
  text-align: center;
}

nav ul li {
  float: left;
  padding: 0;
  width: 200px;
}

nav ul li a {
  width: 100%;
  padding: 21.5px 0px;
  color: white;
  font-size: 20px;
  text-decoration: none;
  font-family: Verdana, sans-serif;
  text-transform: uppercase;
  transition: all .25s ease;
}

nav ul li a:hover:not(.active) {
  background-color: rgb(35, 35, 35);
}

nav .active {
  background-color: rgb(63, 63, 63);
}

nav .table {
  display: table;
  margin: 0 auto;
}

nav .color {
  background-color: black;
}

nav li a, nav li {
  display: inline-block;
}

.banner {
  width: 100%;
}

How can I get the navbar to be flush with the banner image?

If you are in Chrome you can hit Ctrl-Shift-C and then select that space to see which element it is and then look at the "computed" panel in the chrome developer tools to test your changes. — Dean, Dec 21 '18 at 14:06

score 2 · Accepted Answer · answered Dec 21 '18 at 14:10

2

.banner {
  width: 100%;
  display: block;
}

answered Dec 21 '18 at 14:10

Hakeem.D

126
3
12

1

No need for `width: 100%`, that's block elements default. – Asons Dec 21 '18 at 14:25
Thanks, that did it! :D – Donut Dec 21 '18 at 14:29

score 0 · Answer 2 · edited Dec 21 '18 at 14:22

0

Try adding vertical-align: middle to your image in css, it should fix your problem.

edited Dec 21 '18 at 14:22

m4n0

29,823
27
76
89

answered Dec 21 '18 at 14:06

Nemanja Pudar

57
1
2

Why is there a gap between my banner image and navigation bar?

2 Answers2