HTML / CSS。 需要幫助，僅使我的邊框充滿屏幕的整個寬度

Question

屏幕快照 https://melchillington.github.io/Website1/contact.html到目前為止，這是我的網站，我的問題在聯系頁面上，但主頁上的圖像也存在類似的問題（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

您有一個max-width: 960px設置為id為' body '的元素中的所有div。

您需要在此特定元素上覆蓋此樣式。 要么刪除該最大寬度（注意：這可能會在不知道您的代碼庫的情況下對其他元素造成意想不到的后果，我不能說這是否安全），或者您可以設置max-width: none !important; 在.headerC元素上。

順便說一句：！important的使用通常不被接受，並且最好有一個更加組織化和結構良好的CSS結構，但這超出了這個問題的范圍，您可以在這里閱讀更多內容。

編輯：對於index.html上的圖像，您將需要一種稍微不同的方法。 從HTML中刪除圖片元素：

<img src="images/truck.jpg" alt="">

而是將圖片用作.header元素上的背景圖片，就像CSS一樣：

background-image: url('images/truck.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: 10%;

因此， .header元素的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%;
}

使用background-position屬性根據需要定位圖像。

您現在也可以從CSS中刪除以下內容，因為它們現在已經多余了：

#body.home div.header img {
    display: block;
    left: 50%;
    margin: 0 auto 0 -563px;
    padding: 0;
    position: absolute;
    width: 1126px;
}