-1

I am attempting to make a simple colored banner using CSS at the top of a page.

What am I doing wrong that is causing the banner not to completely fill the page? Is their a line of code I can add that tells css to fill the page completely from left to right for a given section?

my css is:

header{
    padding: 10px;
    text-align: center;
    background: darkblue;
    letter-spacing: 2px;
    font-size: 36px;
}

my HTML is:

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="blog.css">
 </head>

<Header>
     <H1 class="font-effect-fire">My Site</H1>
     <p> A Website for me, about me</p>
ChillieCode
  • 139
  • 1
  • 8
  • Before you apply any CSS solution that anybody provides, I'd recommend [validating your HTML](https://validator.w3.org/)-- you have no `` element, which is likely to be a problem. – Alexander Nied Dec 30 '20 at 01:54

1 Answers1

2

Just simply add the following code above the .header selector in your css:

*, *::before, *::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

here's a codepen demonstrating the working code:

https://codepen.io/dwayne-dev/pen/ZEprzqX

Dwayne Rill Jr
  • 23
  • 4
  • 1
    Also worth noting: before the poster attempts any CSS solutions, they should probably fix major problem with their HTML structure, like the lack of a `` element. That's _not_ to say that this isn't the correct solution-- simply that you want a foundation of sound markup before you try styling it. – Alexander Nied Dec 30 '20 at 01:55
  • 2
    Ahhhhh I didn't even catch that. Was so excited to answer my first question that I completely missed that xD – Dwayne Rill Jr Dec 30 '20 at 02:44