Center an element and fix background color

Question

When using light/dark mode the background colour is only covered the container not the whole page

Other then media queries,how can i reach a response design so that the container is centrally aligned in all screen sizes?

Here’s the Website

https://mkhaleddd.github.io/To-Do-List/

Here’s the code

https://github.com/Mkhaleddd/To-Do-List/tree/master

Answer 1

You can try to center the whole thing with CSS or with the <center> - HTML Tag.

And it look's like you have a problem with the Textbox, because it is out of the Window, so you can't see the first 3 letter if you write something in there.

Answer 2

I did try the center element it didnt work
The textbox will show eventually when the container is correctly centered which I cant achieve
I tried flexbox and didnt work

Answer 3

You must center the parent, so try to center the whole body section.

Answer 4

Use Flexbox or Grid Layout to center-align your container both vertically and horizontally. These layout techniques can help you achieve a responsive and centered design without having to write numerous media queries.
https://www.tellpopeyes.biz/

Answer 5

To fix the background color.

Remove display flex from the body element in your CSS file.
body {

    margin: 0;

    /* display: flex; */

    height: 100vh;

    width: 400vh

}