Could really use some help with background colors in HTML and CSS

Software Development Programming Help
#1

check.PNG
check.PNG1892×1010 148 KB

Hi,

I have trouble understanding why I have such big white strips on the sides of my page (Pic attached). I’ve tried looking for a fix a while now but nothing seems to really work. Couldn’t find anything in my code that might cause this too.

Appreciate any help.

#2

if that is a public project, you can send the direct link, it’s best, so we can take a closer look

#3

It’s not a public repository. Any other way I could send relevant snippets of the code?

#4

screenshots will do and pasting of code here

#5

index.js ← the page that is in the screenshot

import * as React from "react"
import Layout from "../components/Layout"
import { container, heading1, body1, heading2, picturelist, picturedo, html, body } from "../components/index.module.css"
import { StaticImage } from "gatsby-plugin-image"

const HomePage = () => {
  return (
    <>
    <html className={html}>
      <Layout pageTitle="Homepage"></Layout>
      <body className={body}>
      <div className={container}>
        <h1 className={heading1}>What We Do</h1>
        <body>
          <p className={body1}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis mi ac tellus rhoncus, sit amet efficitur lorem viverra. Nam augue justo, posuere eu mi ut, aliquam auctor enim. Praesent nisi tortor, facilisis vestibulum massa eu, lobortis cursus metus. Ut iaculis pulvinar rhoncus. Praesent consectetur felis a orci aliquet, faucibus eleifend enim rhoncus. Curabitur vitae tellus eu ligula auctor facilisis. Nulla venenatis vehicula tortor, sed hendrerit enim maximus sed. Sed id malesuada odio, dapibus finibus ligula. Fusce rhoncus, eros sit amet feugiat maximus, dui nisi commodo eros, eu ultricies leo nulla eget metus. Nunc vel nisl at diam dapibus ultrices et nec sem. Nulla facilisi.</p>
        </body>
      </div>
      <div className={container}>
        <h2 className={heading2}>Sneak Peek</h2>
        <body>
          <ul className={picturelist}>
            <li className={picturedo}><StaticImage src= "../images/image4.jpg" alt="silly" placeholder="blurred"></StaticImage></li>
            <li className={picturedo}><StaticImage src= "../images/image6.jpg" alt="silly" placeholder="blurred"></StaticImage></li>
            <li className={picturedo}><StaticImage src= "../images/image5.jpg" alt="silly" placeholder="blurred"></StaticImage></li>
          </ul>
        </body>
      </div>
      </body>
      </html>
    </>
  );
}

export default HomePage

index.module.css ← the css module for the index page

.container{
    background: ghostwhite;
    font-size: 20px;
    padding: 10px;
    border: 1px solid lightgray;
    margin: 10px;
}
.heading1{
    color: rgb(0, 34, 102);
    text-align: center;
    font-size: 48px;
}
.body1{
    color: darkblue;
    text-align: center;
    font-size: 24px;
}
.heading2{
    color: rgb(0, 34, 102);
    text-align: center;
    font-size: 48px;
}
.picturelist{
    align-items: center;
    justify-content: center;
    display: flex;
    list-style: none;
    padding-left: 0;
}
.picturedo{
    height: auto;
    width: auto;
    padding: 60px 120px;
}
.html{
    background: #11001A;
    background: -moz-linear-gradient(45deg, #11001A 0%, #00004D 70%, #000000 100%);
    background: -webkit-linear-gradient(45deg, #11001A 0%, #00004D 70%, #000000 100%);
    background: linear-gradient(45deg, #11001A 0%, #00004D 70%, #000000 100%);
}
.body{
    min-height: 100%;
    min-width: 100%;
    margin: 0px;
}

global.css

html {
    background: #11001A;
    background: -moz-linear-gradient(45deg, #11001A 0%, #00004D 70%, #000000 100%);
    background: -webkit-linear-gradient(45deg, #11001A 0%, #00004D 70%, #000000 100%);
    background: linear-gradient(45deg, #11001A 0%, #00004D 70%, #000000 100%);
}

gatsby-browser.js

const React = require("react")
const Layout = require("./src/components/layout")

// Logs when the client route changes
exports.onRouteUpdate = ({ location, prevLocation }) => {
  console.log("new pathname", location.pathname)
  console.log("old pathname", prevLocation ? prevLocation.pathname : null)
}

// Wraps every page in a component
exports.wrapPageElement = ({ element, props }) => {
  return <Layout {...props}>{element}</Layout>
}

//import stylesheet
import "./src/styles/global.css"
#6

Found the solution to my problem. Thanks for anyone trying to help.
I created a global.css stylesheet and implemented it correctly this time to gatsby-browser.jsx.
You need to restart the development server after creating gatsby-browser.jsx so that’s why it didn’t show yet.
Thank you all.