Question

https://jsfiddle.net/cxLvabm4/3/ screenshot 到目前为止，这是我的网站，我的问题在联系页面上，但主页上的图像也存在类似的问题（index.html）。关于任何内容的任何有用的提示/建议也都会得到认可，因为我是html的新手，但想编写代码从我在网上找到的免费模板开始的实践网站

.headerC {
  background: #89cff0;
  font: 36pt/40pt courier;
  color: white;
  line-height: 0.1;
  font-variant: small-caps;
  border: thick dashed hotpink;
  width: fill;
}

<div class="headerC">
  <h1 align="center">Contact</h1>
  <h5 align="center"> <a href="tel:203-831-9722" class="link">203-831-9722</a></h5>
  <h5 align="center">234 East Ave 06855</h5>
  <h6 align="center">Norwalk, CT</h6>

</div>

基本上，我只想让粉红色的虚线边框填满我尝试过几件事的宽度，但似乎没有任何作用

Answer 1

添加此项以防止使用body元素的默认边距：

html, body {
  margin: 0;
}

.headerC {
  background: #89cff0;
  font: 36pt/40pt courier;
  color: white;
  line-height: 0.1;
  font-variant: small-caps;
  border: thick dashed hotpink;
}

html,
body {
  margin: 0;
}

<div class="headerC">
  <h1 align="center">Contact</h1>
  <h5 align="center"> <a href="tel:203-831-9722" class="link">203-831-9722</a></h5>
  <h5 align="center">234 East Ave 06855</h5>
  <h6 align="center">Norwalk, CT</h6>

</div>

Answer 2

您在元素内的所有div上都设置了max-width: 960px，其ID为'body'。

您需要在此特定元素上覆盖此样式。要么删除该最大宽度（注意：这可能会在不知道您的代码库的情况下对其他元素产生意想不到的后果，我不能说这是否安全），或者您可以在{{1}上设置max-width: none !important; }元素。

顺便说一句：通常不赞成使用！important，最好有一个更加组织化和结构良好的CSS结构，但这超出了这个问题的范围，您可以阅读更多的here。

编辑：对于index.html上的图像，您将需要一种稍微不同的方法。从HTML中删除图片元素：

.headerC

，而是将图像用作<img src="images/truck.jpg" alt="">元素上的背景图像，就像CSS一样：

.header

因此，background-image: url('images/truck.jpg'); background-repeat: no-repeat; background-size: cover; background-position: 10%;元素的CSS如下所示：

.header

使用background-position属性根据需要定位图像。

您现在还可以从CSS中删除以下内容：

#body.home div.header {
    background-image: url('images/truck.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 10%;
    margin: 0;
    max-width: none;
    overflow: hidden;
    padding: 0;
    width: 100%;
}

HTML / CSS。需要帮助，仅使我的边框充满屏幕的整个宽度

2 个答案: