0

I'm VERY new to CSS and HTML and this is my second proper website outside of class. I've got a rather unorthodox style as far as I can tell because I prefer to use grid as opposed to fixing objects based on their position. So, as a result I've had issues with getting the grid box to fully fit the screen so that the color of the grid takes advantage of the WHOLE screen.

I've attempted using 100vh/vw and 100%. Not sure what else to try considering the limited information I was able to find online

.ttl {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: "g1";
    height: 100vh;
    width: 100%;
    background-color: #FC7146;
    justify-self: center;
}

.title {
    grid-area: g1;
    justify-self: center;
    align-self: center;
    text-align: center;
    color: white;
    z-index: 1;
    font-family: 'MyWebFont', Fallback, sans-serif;
    font-variant: small-caps;
    letter-spacing: 7px;
    font-size: 100px;
}

I'm just trying to make sure that the color fits the entire screen as it is not currently.

Paulie_D
  • 107,962
  • 13
  • 142
  • 161
Robert Smith
  • 5
  • 3

1 Answers1

1

Before your CSS is loaded in, browsers apply some predefined styles on every document. This is known as the browser stylesheet. It includes the rules to style buttons, default margins and font-size for h1-h6 and p elements, etc.

Browser stylesheets may include margin or padding on the body element. This is the case here.

Just add

body {
  margin: 0;
  padding: 0;
}

You can also use a plugin like normalize.css to make your css look similar across multiple browsers. https://necolas.github.io/normalize.css/

Vishal Biswas
  • 401
  • 2
  • 8