Kevin Powell - CommunityKP-C
Kevin Powell - Community•11mo ago•
6 replies
aprhyvs

How to keep .wrapper content centered in different dimensions?

Similarly by just zooming in and out, I noticed the contents in my .wrapper go further to the left side.

I tried using these:

max-width: 700px; 

max-inline-size 700px;

margin-inline: auto;

while these make the .wrapper centered while zooming out, when I zoom in, it still makes the contents go to the left.

here is the wrapper i'm talking about:
.wrapper {
    width: 45%;
    margin: 0 auto;
    padding: 2em;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 0.5em;   
}


Here's a reference on what I'm trying to achieve:
https://dontasktoask.com/

The content in this website stay centered whenever you zoom in and out.
100_zoom.png
125_zoom.png
Don't ask to ask, just ask
Don't ask to ask, just ask
Was this page helpful?