flex is the answer

I’ve tried flex, grid and relative/absolute positioning

Does’t work eventho it’s being applied

I mean it's not enough to say display: flex and hope it sorts itself out, but you should be able to achieve this behavior with flex rather easily

I know

Justify center gets applied but it doesn’t do anything

I’ll try to recreate in codepen

Something like this

What can I do to keep it centered inside main?

huh, there's 2 circles

Bruh

<main>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</main>

maybe you didn't save

.container{
display: flex;
gap: 8px;

overflow: hidden;
width: 90%;
}
.item{
width: 188px;
height: 50px;
background-color: red;
flex-shrink:0;
}
main{

}

open that link you posted in incognito

Yeah I’m on my phone in bed rn

Never used codepen before

Should be easy to see what I’m trying to do though

idk man, literally justify-content: center; added to .container does what you want

Ahhhhh

Why doesn't it work on my site..

I also tried absolute relative positioning

maybe like this?

 .outer-container {
  width: 1500px;
  overflow: hidden;
  position: relative;
}

.inner-container {
  width: 4000px;
  display: flex;
  justify-content: center; horizontally 
 0.3s ease; 
}

I'll try it

you can try make your main as flex and justify-content:center.
and, make the container as absolute.

Huh, this would flex center the items inside the container though?

I've done it similarly a few days ago but that's not what I'm looking for

This seems to get it somewhat closer?

It sizes down from both sides but it does it in a weird manner

wait a second

well we kinda got it working at least 🙂

it drags out from the left and in on the right

I want it in on the left and right

Any idea as to why it isn't working as normal like this?

I think that's a result of the width being 100%, if I set a solid px width it has the same behaviour as before

4000px gives the same behaviour as before

https://codepen.io/arsadii/pen/ZEwpOyV
here's the final result

Yeah exaclty like that

I tried absolute relative positioning

please check the latest, cause I fix some bugs on it

Ok, I'll try

I haven't seen some of these properties before

what properties?

maybe it don't need to absolute. I comment this code it also works

also don't need to transform-origin

Yeah

Oh actually just saw it now

This is this^^

just justify-centering the items container, I know it works but it also displaces the items, I want it to start at item 1

oh okay then

Is there another way to do ti?

wait a sec

I thought since it works with justify-center on the container that flex-start would work, but that doesn't do the same..

like this?

I have some updates on codepen, maybe you want to check it

This is how it is right now

if I shrink the browser it only moves in from the right

I want it to move in the same on both sides so number stays in the middle

okay, that's interesting.

ChatGPT's solution is adding a left 50% and transform -50% to the container

The transform -50% is important but I can't do that because I'm using the transform property for something else

Here's an example of what I'm trying to recreate if that helps

This is before flexbox though

Nevermind this also has that bug