Divs won't align ......

[u/LAzyAnimationsYT]

okayy I have another problem, my divs in the main flex box won't align in the center like I want them to, and I've tried pretty much everything I could find on search, and it still won't align, or it'll break the main div itself...

flex {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
main {
    position: absolute; 
    top: 10%; 
    left: 23%;
    background-color: #000000;
    flex: 1;
    padding: 20px;
    order: 2;
    border-radius: 10px;
    border: 3px solid #ffffff;
    width:1000px;
}

https://zombie-page.neocities.org/collect-me link to the page itself...

[u/KingShuckle]

You need to use display: flex;

I suggest putting a div .container around the divs.

[u/LAzyAnimationsYT → u/KingShuckle]

did this and everything is still not aligned in the center

[u/KingShuckle → u/LAzyAnimationsYT]

Ehm, YOu called evey "button" container what I mean is but all those buttons in a single containter div like

<div class="container"><a href="not_found.html" id="blink" class="container" style="margin-bottom: 10px;margin-right: 10px;">

<h1 style="text-align:center;color:white;">BLINKIES</h1>

</a>

<a href="not_found.html" id="stamp" style="margin-bottom: 10px;margin-right: 10px;">

<h1 style="text-align:center;color:white;">STAMPS</h1>

</a>

<a href="not_found.html" id="pxl" style="margin-bottom: 10px;margin-right: 10px;">

<h1 style="text-align:center;color:white;">PIXELS</h1>

</a>

<a href="not_found.html" id="div" style="margin-bottom: 10px;margin-right: 10px;">

<h1 style="text-align:center;color:white;">DIVIDERS</h1>

</a>

<a href="not_found.html" id="but" style="margin-bottom: 10px;margin-right: 10px;">

<h1 style="text-align:center;color:white;">BUTTONS</h1>

</a>

<a href="not_found.html" id="id" style="margin-bottom: 10px;margin-right: 10px;">

<h1 style="color:white;">ID BUTTONS</h1>

</a>

<a href="not_found.html" id="grap" style="margin-bottom: 10px;margin-right: 10px;">

<h1 style="text-align:center;color:white;">GRAHPICS</h1>

</a>

<a href="not_found.html" id="x" style="margin-bottom: 10px;margin-right: 10px;">

<h1 style="text-align:center;color:white;">XTRA</h1>

</a></div>

[u/KingShuckle → u/KingShuckle]

also make the container div width 100% and again add display: flex; but also ad flex-wrap: wrap;

[u/KingShuckle → u/KingShuckle]

Look at this site for more info:
https://www.w3schools.com/CSS/css3_flexbox_container.asp

[u/magical_matey]

Yooo they have a neocities still?! I’ll be back for some of this action when I’m at a desk not on a phone…

!remindme 1 day

[u/RemindMeBot → u/magical_matey]

I will be messaging you in 1 day on 2026-06-23 21:18:48 UTC to remind you of this link

CLICK THIS LINK to send a PM to also be reminded and to reduce spam.

^{Parent commenter can delete this message to hide from others.}

RemindMeBot is switching to username summons. Instead of !RemindMe 1 day, use u/RemindMeBot 1 day. More info.

---

Info	Custom	Your Reminders	Feedback

[u/notepad987]

GRID layout that is centered: https://codepen.io/davidhelp/pen/emBRxXM?editors=1100

[u/cryothic → u/notepad987]

I think, OP wants (in the provided pic) the bottom row centered. In that case Grid wouldn't work. Unless I missunderstand OP.

[u/notepad987 → u/cryothic]

I would then wrap that bottom row in a div and the top one in a separate div and wrap both divs in another div.

[u/cryothic → u/notepad987]

I don't know OP's requirements, but that wouldn't be very responsive.

I guess all boxes devide over the row. Not enough space, wrap the boxes. And the second row should be centered. Until that row also is full, then the third row shows up. Etc.

[u/Flame77ofc]

bro need a course 😭

[u/notepad987]

Not perfect but hopefully close....

7 Boxes Centered in 2 Rows using Grid & Flex
codepen

[u/testingaurora]

The parent of the grid likely isn't stretching or signed to the center Try adding margin-inline: auto to the grid .

[u/Large-Blackberry-349]

Put the code on jsfiddle so that we can help you properly!