Kevin Powell - Community•2mo ago

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;

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;   
}

.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.

Don't ask to ask, just ask

4 Replies

aprhyvsOP•2mo ago

I fixed the issue, it was something related to my media queries. it was something related that the margin was being set to 0. Oh well its all good now

ἔρως•2mo ago

let me guess: your css reset had * { margin: 0; }? and that changed the margin auto to 0?

aprhyvsOP•2mo ago

yes lmao

ἔρως•2mo ago

yeah, that crap is infesting everybody's css

Gaming

Programming

How to keep .wrapper content centered in different dimensions?

Did you find this page helpful?