CSS styling issue

[mcguirto]

Describe the bug A clear and concise description of what the bug is. Unable to style the background of the page rather than a single element

What is the problem you are trying to solve?

changing the background

Expected behavior A clear and concise description of what you expected to happen.

the background should change color to the desired color

What is the actual behavior? A clear and concise description of what actually happened.

Nothing happens

Post any code you think might be relevant (one fenced block per file)

What is your best guess as to the source of the problem?

I'm unsure of where the issue is coming from

What things have you already tried to solve the problem?

Additional context Add any other context about the problem here.

Paste a link to your repository here

https://github.com/mcguirto/Genshin-Artifact-Calculator-Client

[timmshinbone]

Share the CSS code and the react component you're trying to update the background color so I can see what's going on

[mcguirto]

// import ArtifactsIndex from './artifacts/ArtifactsIndex'
import './style.css'

import ArtifactsIndex from './artifacts/ArtifactsIndex'

const Home = (props) => {
    // const { msgAlert, user } = props
    console.log('props in home', props)

    const { user, msgAlert } = props

    //////////// Why user for not signed in but !user for signed in.
    return (
        <>
        <div class="container">
            <h2>See the Artifacts</h2>
            {
                user ?
                    <ArtifactsIndex msgAlert={ msgAlert } user={ user } />
                :
                    <p>You need to sign in!</p>
            }
        </div>  

        </>
    )
}

export default Home```

here is the js

```html, body {
    margin:0;
    padding:0;
}

div {
    background-color: rgb(61, 61, 132);
}

h2 {
    color: azure;
}
p{
    color: azure;
}```

this is the css

[mcguirto]

Share the CSS code and the react component you're trying to update the background color so I can see what's going on

// import ArtifactsIndex from './artifacts/ArtifactsIndex' import './style.css'

import ArtifactsIndex from './artifacts/ArtifactsIndex'

const Home = (props) => { // const { msgAlert, user } = props console.log('props in home', props)

const { user, msgAlert } = props

//////////// Why user for not signed in but !user for signed in.
return (
    <>
    <div class="container">
        <h2>See the Artifacts</h2>
        {
            user ?
                <ArtifactsIndex msgAlert={ msgAlert } user={ user } />
            :
                <p>You need to sign in!</p>
        }
    </div>  

    </>
)

}

export default Home```

here is the js

    margin:0;
    padding:0;
}

div {
    background-color: rgb(61, 61, 132);
}

h2 {
    color: azure;
}
p{
    color: azure;
}```

this is the css

unsure if you got that last comment I made

[mcguirto]

Add fragment as a div