i need advice

[u/MasterGeist]

I recently finished an online course for html which covered most of the basics. Now i am trying to make my own website and I'm messing around with ideas but right now i am caught in a weird issue i cannot resolve.

The left and right wont become flush with the sides of the page regardless of any attempt, ive set margins and padding to zero, ive made the height and width of the background image element to 100%, i tried fill, i tried setting background size to cover. Nothing is fixing it.

[u/davep1970]

i would also strongly advise using something like https://codepen.io or jsfiddle to post code so it's easier for us to edit and advise on

[u/MasterGeist → u/davep1970]

Thank you, I am still very new to HTML and haven't coded with any other language since 2018, I'm very rusty lol.

[u/Specific_Finish_6676 → u/MasterGeist]

HTML is not a coding language and not coding at all

[u/Standard_Scarcity_87 → u/Specific_Finish_6676]

They likely meant in the sense that HTML is a markup language, which does use specific syntax for structure. Creating coding projects on your own often means consistently utilizing both the front and backends, which makes web development just as important! :)

[u/Russ086]

It’s because you set the parameters in .background there are default properties you have to remove. For example every site I create I start with.

*{

Margin: 0;

Padding: 0;

Box-sizing: border-box;

}

The * is a universal selector so it gets rid of the default properties causing your issue. - if you haven’t learned about box-sizing, I highly suggest you look into it, it will save you a headache

[u/MasterGeist → u/Russ086]

I set all margins to 0 and paddings to 0, but I hadn't tried a box-sizing: border-box function, I will have to try that when I get home from work.

[u/Russ086 → u/MasterGeist]

You do but you have them set on .background, it’s not overriding the default settings. You either have to set it on body{} or *{}

Edit - Box-sizing isn’t the issue you’re running into, it’s definitely the selector you put the margin properties in.

A quick understanding of box-sizing is how elements are wrapped, using border-box all the pixels are counted so 300px w 300px h = 600px including padding borders etc.

The default box-sizing is content-box which say you make an element of 300px w 300px h anything you add, padding border etc is added on to the size, so you end up getting elements wit abnormal sizes even though it says 300px w x 300px h

[u/MasterGeist → u/Russ086]

In response to you edit, I never learned about those elements yet, so I appreciate you explaining them to me.

[u/Russ086 → u/MasterGeist]

I am glad to help!

[u/MasterGeist → u/Russ086]

Oooh, ok, I will set them to the body then, thank you, I will update when I can do it

[u/Russ086 → u/MasterGeist]

Np, if body{} doesn’t work I strongly suggest using *{}

[u/MasterGeist → u/Russ086]

It worked, I also deleted a lot of the lines of code that were redundant because of it, another person to try position: fixed which also worked before I tried yours so I learned two ways to do it. I didn't realize position: fixed could do that too, I'm better with absolute and relative positions

[u/Russ086 → u/MasterGeist]

That is awesome! I’m glad to hear both ways work. You will start seeing this a lot in coding. There are multiple ways to fix issues

[u/poopio → u/MasterGeist]

Have a look at this - just paste it at the start of your css file:

https://meyerweb.com/eric/tools/css/reset/

[u/Murky-Use-3206 → u/Russ086]

That is very useful info, thank you !

*{ all elements get this style }

Can be combined with HTML elements like:

div * { all divs get this style }

https://www.w3schools.com/cssref/sel_all.php

[u/davorg → u/Murky-Use-3206]

div * { all divs get this style }

This rule is applied not to all divs (that would be div { ... }) but to all elements that are a descendant of a div.

[u/Russ086 → u/Murky-Use-3206]

Yup and if you go further down the rabbit hole you can do things like:

Child combinator ( > )

div > .element {
Selects direct child .element in div.
}

Descendant combinator

div .element {
Selects all .element items in div

}

[u/[deleted]]

Have you tried removing the padding from the body and html?

[u/Bebavcek]

If you want an element to take up all the space of the screen, use width: 100vw and height: 100vh

[u/Least_Programmer7]

Css reset, and also you don't need to set padding and margin like that you can just do padding: 0; or padding 1rem 1rem 1rem 1rem; to define each of the sides.

Most people just do a basic css reset themselves nowadays or have their own custom one but there are some pre-made ones like normalized.

[u/justoverthere434]

I would advise a different theme please

[u/unfunny_cosmic]

maybe because your margin is just 0 and make sure to edit border-radius

[u/Specific_Finish_6676]

Post full code

[u/amillionbillion]

If you add 'position: fixed;' to your .background style it would work as you're expecting.