user3006792 user3006792 - 1 month ago 14
CSS Question

Remove gap between nav and header

I saw the same topic for my question, but it didn't not solve my problem.
I want to get rid of the gap between the nav and header.

I removed the margins, so I am not sure why there is a gap.

Example: https://jsfiddle.net/RE006/6uv4xnyz/

Basic Template:
HTML5:



* {
margin: 0px;
padding: 0px;
}

body {
background-color: #42413c;
color: #000;
font-family: "Times New Roman", Times, serif;
font-size: 62.5%;
}

.container {
width: 80%;
background-color: #fff;
margin: 0px auto;
}

header, main, footer {
display: block;
}

nav ul {
background-color: #a1d5f2;
display: inline-block;
font-family: Arial, Helvetica, sans-serif;
font-size: 1rem;
list-style: none;
padding-left: 1em;
width: 100%;
}

nav li {
float: left;
padding: .5em;
}

nav a, nav a:visited {
color: #000;
padding: 5px 5px 5px 15px;
text-decoration: none;
}

nav a:hover, ul.nav a:active, ul.nav a:focus {
color: #fff;
}

header h1 {
background-color: #858070;
color: #fff;
letter-spacing: 2px;
margin: 0px;
padding-bottom: .5em;
padding-left: 1em;
}

main {
font-size: 1rem;
padding: 1.5em;
}

section {
float: clear;
}

section h2 { border: 1px solid red;
float: left;
}

a img {
border: none;
}

footer {
font-size: 1rem;
padding: 1em;
background-color: #CCC49F;
position: relative;
clear: both;
}

<nav>
<ul>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
<li><a href="#">Page 4</a></li>
</ul>
</nav>

<header>
<h1>H1 Example</h1>
</header>

<div class= "container">
<main>
</main>
<footer>
Name
</footer>
</div><!-- end .container -->





The rest of the CSS code is in the jsfiddle example.

Answer Source

In nav ul use float:left not use display:inline-block.

* {
  margin: 0px;
  padding: 0px;
}

body { 
  background-color: #42413c;
  color: #000;
  font-family: "Times New Roman", Times, serif; 
  font-size: 62.5%;
}

.container {
  width: 80%;
  background-color: #fff;
  margin: 0px auto; 
}

header, main, footer {
  display: block;
}

nav ul {
  background-color: #a1d5f2;
  float: left;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  list-style: none;
  padding-left: 1em;  
  width: 100%;
}

nav li {
  float: left;
  padding: .5em;	
}

nav a, nav a:visited { 
  color: #000;
  padding: 5px 5px 5px 15px;
  text-decoration: none; 
}

nav a:hover, ul.nav a:active, ul.nav a:focus { 
  color: #fff;
}

header h1 { 
  background-color: #858070;
  color: #fff; 
  letter-spacing: 2px;
  margin: 0px;
  padding-bottom: .5em;
  padding-left: 1em;
}

main {
  font-size: 1rem;
  padding: 1.5em;
}

section {
  float: clear;
}

section h2 { 
  border: 1px solid red;
  float: left;
}

a img { 
  border: none;
}

footer {
  font-size: 1rem; 
  padding: 1em;
  background-color: #CCC49F;
  position: relative;
  clear: both; 
}
<body>
  <nav>
    <ul>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
      <li><a href="#">Page 4</a></li>
    </ul>
  </nav>

  <header>
    <h1>H1 Example</h1>
  </header>

  <div class= "container">  
    <main>	
    </main>
    
    <footer>
    Name
    </footer>
  </div><!-- end .container -->
</body>