I cannot get the main background image to fill up my whole page entirely because there is a small white portion of my webpage that is on top of my image that will not go away no matter what I do. I tried setting the padding in my body to zero, that did not work. I tried setting the background-size as cover and background-position property as center and that did not work.
the h4 property in my main div adjusts to whatever value I set it as and that works okay. But when I adjust my h1 property , the whole page seems to move , and not just the h1 title away from the top of my page. Here is the link to the code.https://codepen.io/noblegas/pen/wvvXdjM
The white space is coming from your h1 title. Set your .main-title h1 margin to 0, and can just use padding top to adjust the text block down more instead.
AFter I make those changes and try to adjust my h1 title with the padding-top property , my h4 property also moves and I don’t want my h4 text to move at all when adjusting the position of my h1 text.
I want to create the dark rectangular box first , then add the form validation info later in that dark purple rectangular box. But so far I can not center my box with my title and subtitle and I cannot get the box to take up a large portion of the height of the page. I tried using the justify content property to center my rectangle, but it doesn’t work.
update: fixed it sort of i suppose. but I was wondering why justify-content center did not work when I attempted to center the box but margin auto apparently did.
Glad you got it to work! Justify-content is working, but not the way you are expecting it to. I see that you have the flex property on your form-box, and it’s centering all the content within that box, for example, it will center the letter ‘k’ that you have on there.
If you want to center that entire form-box div itself relative to the main page, you would need to wrap form-box in another div, such as container, and use the flex properties on the container itself.