I cannot get my image to fill up my entire page and the margin top property for my h1 property won't adjust correctly

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.

I would start with:

* {
  margin: 0px;
  padding: 0px;
}

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.

If that’s the case, instead of using padding-top, try using something like this on the h1

transform: translateY(2rem)

Doing so will only move the h1 property and nothing else around it.

1 Like

I want my rectangular box to look like FCC’s main survey form project. https://codepen.io/freeCodeCamp/full/VPaoNP

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.

Here is my link below:

https://codepen.io/noblegas/pen/wvvXdjM

thanks. I posted another issue I had with a problem I posted below that is part of the same code.

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.

https://codepen.io/noblegas/pen/wvvXdjM

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.

This is what the HTML side will look like

<div class="container">
    <div class="form-box">
        ....content
    </div>
</div>

And the CSS side

.container {
   height: 100%;
   width: 100%;
   display: flex;
   justify-content: center
}

.form-box {
    background:purple;
    width:50%;
    min-height:100vh;
}