Ebben az esetben a <center>-nek miért nem tudok margin-bottom értéket adni?

Egyrészt, ne kisregényt írj, hanem csatolj kódot, abbol látszik is, hogy mi a probléma.

Másrészt a <center> tag elavult, ne használd.

Harmadrészt, ismerkedj meg a flexbox-szal és a griddel, illetve az olyan mértékegységekkel, mint a vh, mert szerintem te valami ilyesmit szeretnél csinálni, csak nem tudod, hogyan kell.

Nem úgy értem.

Azzal, hogy a footer-nek position: fixed-et adtál, kiemelted a document flow-ból, innentől fogva a centernek és a footernek semmi közük egymáshoz, nincsenek layoutbeli kapcsolatban egymással. Gyakorlatilag tök függetlenek egymástól.

Több jó megoldás is van, de az sehogy se lesz jó, ha valamelyiket kiemeled a document flow-ból.

Adj a body-nak 100vh-t, így akkora lesz, mint a megjelenítő mérete. Ugyanakkor legyen flex, és flex-column, hogy a layout függőlegesen (oszlopszerűen) legyen. Már ennyi elég ahhoz, hogy a main és a footer egymás alatt legyenek.

Aztán adj egy flex-grow: 1-et a main-nek, hogy felhasználja a rendelkezésre álló területet.

Itt egy példa: [link]

Ez akkor is jól működik, ha a main-ben nincs semmi, mert a flexbox akkor is "lenyúlik" az oldal aljáig,

Itt egy grides megoldás, ez talán még egyszerűbb is: [link]

A body magassága 100vh, egyben grid is, a grid-template-rows pedig "1fr auto;", ami azt jelenti, hogy az első sor kitölti a rendelkezésre álló helyet (egy frakció), a második sor magassága pedig automatikus.

Egyszerű, mint az egyszer egy.

Ezért:

width:00%;