我的CSS填充和边距正在显示，但未声明

Question

我正在尝试修复我的网站。问题＃1我无法通过使用margin-left或padding-left在页眉上推送列表。问题2，主标题1和3正在那里创建自己的填充。我的目标是修复填充并使标头更靠近在一起，并消除此填充/边距问题。

CSS：

#hlist {
  top: 10px;
  margin-right: 3px;
  position: relative;
  height: 30px;
  padding-right: -12px;
}

ul#hlist{
   float: right;
    list-style-type: none;
    margin: 0;
    overflow: hidden;
}

ul#hlist li {
  float:left;
}

ul#hlist li a {
font-family: 'Poppins';
color: black;
text-align: center;
text-decoration: none;
padding: 14px 16px;
}

ul#hlist li a:hover {
  border-style: solid;
  border-width: 1px;
  border-color: gray;
  color: gray;
}

.content-wrapper {
 padding: 0;
}

.text-wrapper {
  height: 300px;
  width:100%;
  position: relative;
  margin-top: -60%;
}

.text-wrapper h1{
  text-shadow: 2px 2px black;
  text-align: center;
  color: #ffff;
  font-size: 10vw;
}

.text-wrapper h3{
  margin-top: 10%;
  text-shadow: 2px 2px black;
  text-align: center;
  color: #ffff;
  font-size: 30px;
}

HTML：

<div id="header">
  <ul id="hlist">
    <li><a href="#">WHERE TO WATCH</a></li>
    <li><a href="#">ABOUT</a></li>
    </ul>
  <div id="logo-box">
  <img style="height: 32px; padding:5px;" src="https://assets.nationalgeographic.com/styleguide/stable/logos/ng-logo-2fl.svg" alt="logo">
  </div>
</div>
</header>
    <div class="content-wrapper">
  <image id="bg" src="https://i.imgur.com/i2MSrn7.jpg">
    <div class="text-wrapper">
      <h3> The Giant </h3>
      <h1> Panda </h1>
      </div>
    <image id="ply" style="height: 32px; padding:5px;" src="images.svg">
  </div>

Answer 1

您的body设置为margin: 8px。这就是为什么边缘周围有空隙。在margin: 0标签上设置body。签出此codepen I created。这解决了图像边缘周围的间隙。

我不完全理解您问题的第二部分。由于图像的大小，您的页面分布得非常宽。缩小图片，使其不会溢出，您的网站看起来会更好。

如果您想以更简单的方式放置链接，请使用Flexbox并执行以下操作：

display: flex;
justify-content: flex-end;

在您的链接上执行此操作，如果这是您要尝试的操作，它们应该正确浮动。

也请使用CSS Reset。默认情况下，HTML元素带有自动应用的某些CSS样式。重置将摆脱默认样式，因此它们不会干扰您尝试执行的操作。许多HTML元素具有您可能没有意识到的默认填充/边距。