CODEWITHSUNDEEP
htmlcss
23908938
23908938

Reputation: 51

HTML/CSS. need help just making my border fill the entire width of the screen

screenshot https://melchillington.github.io/Website1/contact.html That is my site so far, my issue is in the contact page but also a similar issue with the image on home page (index.html) any helpful tips/advice regarding anything will also be apprecaited I am new to html but wanted to code a website as practice starting from a free template I found online

.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>

Basically I just want that pink dotted border to fill the width I tried a few things but nothing seems to work

Upvotes: 0

Views: 2025

Answers (2)

Robert
Robert

Reputation: 362

You have a max-width: 960px set on all divs within the element with the id of 'body'.

You need to override this styling on this particular element. Either remove that max-width (note: This may have unintended consequences on other elements, without knowledge of your codebase I can't say if this is safe), or alternatively you could set max-width: none !important; on the .headerC element.

As an aside: the use of !important is generally frowned upon, and it's better to have a more organised and well formed CSS structure, but that's out of scope of this question, you can read more here.

EDIT: For the image on index.html you'll need a slightly different approach. Remove the image element from the HTML:

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

and instead use the image as a background image on the .header element like so with CSS:

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

So your CSS for the .header element will now look like:

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

Use the background-position attribute to position the image as you desire.

You will also be able to remove the following from the CSS as it's now redundant:

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

Upvotes: 0

Johannes
Johannes

Reputation: 67768

Add this to prevent the default margin of the bodyelement:

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>

Upvotes: 1

Related Questions