The whole body should now be set at 90% of the width and be centered in the browser window — however, only for large screens. It is not a good to idea to set this for mobile devices as the white space there would be wasted. So, we need to use media queries in this case.
We are opting for a breakpoint of 1024px. As always, we have the two approaches to choose from: Desktop First (general definitions for desktops followed by breakpoints with max-width), and Mobile First (general definitions for mobile devices followed by breakpoints with min-width). However, in the first scenario (Desktop First), we would have to change the properties width and margin first and then reset them again to the default values for mobile devices:
Therefore, in this case, we will use the reverse option Mobile First. But as we will probably use the breakpoint of 1024px more often in the document, and even both as max-width and as min-width, we must avoid any overlapping right from the start. Therefore, to ensure this does not happen, we will add 1 to the min-width.
So, insert the following:
Now the body on all screens wider than 1024px will be centered. However, this effect is still barely noticeable at this point as the background color is completely white. We want to change this.
Give the body (in the general selector outside the breakpoint) explicitly a white background color.
#c7cacfshould appear left and right behind the 90% wide body. To which selector must the gradient be assigned?
Drag the browser window at the right edge to make it smaller and larger. You should now be able to see the jump clearly at 1024px.
To ensure that the content cannot be reduced and expanded indefinitely, now give the body a minimum width of 320px, for instance, and a maximum width of 1400px, for instance (of course for all viewports, outside the breakpoint). You can also test this by changing the size of the browser window.