html - div 底部不需要的填充

Question

我在制作这个网站的标题 div 时遇到了问题。即使我的填充设置为 0，我的水平菜单栏下方也会出现填充或其他内容。我知道已经发布了类似的帖子，但我已经阅读了很多，但似乎没有一个答案对我有用。我已将页眉 div 的背景更改为黄色以使其更加明显。菜单栏两侧还有一两个不需要的像素。我将把我的 css 和 html 代码放在下面。 screenshot

<div class="big header">
<img src="Images/headerphoto.jpg" alt="header_photo">
<div class="navbar">
<ul>
    <li><a class="active" href="default.asp">Home</a></li>
    <li><a href="contact.asp">Contact</a></li>
    <li><a href="about.asp">About Us</a></li>
        <ul class="logo">
        <li><a class="logo" href="http://www.linkedin.com"><img alt="in" src="Images/linkedinlogo.png"></a></li>
        <li><a class="logo" href="http://www.facebook.com"><img alt="fb" src="Images/facebooklogo.png"></a></li>
        <li><a class="logo" href="http://www.twitter.com"><img alt="tw" src="Images/twitterlogo.png"></a></li>
        <li><a class="logo" href="http://www.rss.com"><img alt="rs" src="Images/rsslogo.png"></a></li>
        </ul>
</ul>  

这是相关的 CSS。 (“大”类是我用于页面上所有主要元素的类。)

body {
   background-image:url("Images/background.png");
   background:tile;
}

.header img {
   width: 100%; 
}

.header {
   background-color: yellow;
   height: auto;    
   padding-top: 30px;
   padding-left: 0px;
   padding-bottom: 0px;
   margin-top: 10px;
}


.big {
   width: 80%;
   margin-left: auto;
   margin-right: auto;
   box-shadow: 0px 0px 20px #C5C5C5;
}

这是我的导航栏的 CSS。

.button {
background-color: #3EB5F5;
border: none;
color: white;
transition: all 0.5s;
cursor: pointer;
}

.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}

.button span:after {
content: '»';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}

.button:hover span {
padding-right: 25px;
}

.button:hover span:after {
opacity: 1;
right: 0;
}

.navbar {
width: 100%;    
margin-top: 15px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px; 
}

.navbar ul {
list-style-type: none;
margin: 0px;
padding: 0;
overflow: hidden;
background-color: #828080;
height: 38px;
}

.navbar li {
float: left;
}

.navbar li a[href$=".asp"]{
display: block;
color: white;
text-align: center;
padding: 16px;
padding-bottom: 10px;
padding-top: 10px;
text-decoration: none;
height: 100%;
}

.navbar li a[href^="http"] {
padding-top: 6px;
padding-right: 5px;
padding-left: 5px;
padding-bottom: 5px;
}

.navbar li a:hover {
background-color: #111;
}

.logo img {
width: 25px;
}

.logo {
float:right;
list-style-type:none;
padding-bottom: 0px;
padding-top: 0px;
vertical-align: middle;
}

.active {
background-color: #106AAA   
}

Answer 1

我添加了一个例子来展示http://codepen.io/simondavies/pen/jWjoBy

它工作正常，请检查 css、html 等

我已经猜测了一些东西......希望它会有所帮助

    <div class="big header">
      <div class="header-img"><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=1000%C3%97150&w=1000&h=150" alt="header_photo"></div>
      <div class="navbar">
        <ul>
          <li><a class="active" href="default.asp">Home</a></li>
          <li><a href="contact.asp">Contact</a></li>
          <li><a href="about.asp">About Us</a></li>
          <li><!--<ul class="logo"></ul>--></li>
        </ul>
      </div>
    </div>

CSS

  body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  .header {
    background-color: yellow;
    height: auto;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  .header-img{
    width: 100%;
    height: 150px;
    padding: 30px 0 15px 0;
    margin: 0;
  }
  .header-img img {
    width: 100%;
    height: 150px;
    padding: 0;
    margin: 0;
  }

  .big {
    margin: 0 auto;
    padding: 0;
    margin-top: 10px;
    width: 80%;
    box-shadow: 0px 0px 20px #C5C5C5;
  }

  .button {
    background-color: #3EB5F5;
    border: none;
    color: white;
    transition: all 0.5s;
    cursor: pointer;
  }

  .button span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
  }

  .button span:after {
    content: '»';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.5s;
  }

  .button:hover span {
    padding-right: 25px;
  }

  .button:hover span:after {
    opacity: 1;
    right: 0;
  }

  .navbar {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #828080;
    height: 38px;
  }

  .navbar li {
    float: left;
  }

  .navbar li a[href$=".asp"] {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    padding-bottom: 10px;
    padding-top: 10px;
    text-decoration: none;
    height: 100%;
  }

  .navbar li a[href^="http"] {
    padding-top: 6px;
    padding-right: 5px;
    padding-left: 5px;
    padding-bottom: 5px;
  }

  .navbar li a:hover {
    background-color: #111;
  }

  .logo img {
    width: 25px;
  }

  .logo {
    float: right;
    list-style-type: none;
    padding-bottom: 0px;
    padding-top: 0px;
    vertical-align: middle;
  }

  .active {
    background-color: #106AAA
  }