0

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

23908938
  • 51
  • 1
  • 8

2 Answers2

1

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>
Johannes
  • 64,305
  • 18
  • 73
  • 130
0

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;
}
Robert
  • 362
  • 2
  • 13
  • thank you!! that worked like a charm :) I appreciate it – 23908938 Jul 12 '18 at 20:35
  • is there a way to make my image on index.html also fill width – 23908938 Jul 12 '18 at 20:47
  • @MelissaChillington Sure, I've edited my answer with a suggested solution – Robert Jul 12 '18 at 20:55
  • thank you for updating the question, it is definitely very helpful, however I am unsure of what to delete and where to add in that code – 23908938 Jul 12 '18 at 21:04
  • @MelissaChillington I have expanded on my answer further. If this works for you please mark this as the accepted answer, thanks. – Robert Jul 12 '18 at 21:10
  • I changed it according to what you said but it didn't exactly work, I posted a screenshot in my question that shows what happened – 23908938 Jul 12 '18 at 21:25
  • when I remove the image tag off index.html it removes the image entirely even though I have it in my style.css – 23908938 Jul 13 '18 at 13:36