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

Question

我正在尝试修复我的网站。问题 #1 我无法使用 margin-left 或 padding-left 将 header 上的列表推过去。 Problem #2 the Main Header 1 and 3 are creating there own padding。我的目标是修复填充并使 header 靠得更近并摆脱这个 padding/margin 问题。

#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;
}

<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。这就是为什么边缘有缝隙的原因。在 body 标签上设置 margin: 0。看看这个 codepen I created。这解决了图像边缘周围的间隙。

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

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

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

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

另外，考虑使用 CSS Reset。默认情况下 HTML 元素会自动应用某些 CSS 样式。重置将摆脱默认样式，因此它们不会干扰您正在尝试做的事情。许多 HTML 元素都有默认值 padding/margins，您可能没有意识到。

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

My CSS Padding and Margins are showing up but not declared

html

css

margin

padding