Media query and div issue

[davidhelp]

Hello

The 4 images seen at the website are centered and are arranged in 1 row and will collapse to 3, 2, 1 column as the screen size width is resized.  http://davidswebsite.com/test/center_images_div.html

Question 1: As the screen width is reduced past 768px, the green body background color will show up above the orange container.
How to fix this so it does not?

Question 2: I expand the webpage width past 1150px, the H1 title will aligned with the images. I want the images below the H1 title. Same as when the width is smaller.
How to fix that?

[B i r n o u · Accepted solution]

Question 1:

it is just because when running below 768, the class .container loose it's display as flex... so place this property outside of the media query... why not on the root .container

as

.container {
   display:flex;
}

Question 2:

to avoid the wraping of the H1 give to the H1 selector a basis of 100% as

h1 {
  flex-basis:100%;
}

[davidhelp]

Thanks, it is now looking correct.

I removed the margin for H1 and added padding instead.

I have these media queries.

@media screen and (min-width: 481px) {
h1 {
font-size: 300%;
}
}

@media (min-width: 480px) {
.boxwrapper {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
}