Hogy tudnám be rakni normálisan?

Ezeket komolyan gondoltad?

.container{

width: 170%;

height: 80vh;

....

.calendar{

width: 15%;

height: 33%;

....

A böngészőkben szokott fejlesztőeszköz lenni. F12-t nyomva meg tudod nézegetni a különböző elemeket, sőt át is tudod írni a formázásukat.

widht - szélesség

height - magasság

Egy szatyorba nem fogsz tudni belerakni egy óceánjáró hajót. A méretekkel van a probléma.

Egy div alapból a szülője 100%-át kitölti szélességben. A naptár szülője 170% széles (.container). Buta dolog.

A naptár szélességét százalékban adtad meg, így a képernyő méretétől függ a mérete. Ez akár lehetne rendben is, de minimális szélesség nélkül szét fog esni.

Magasságot is százalékban adtad meg. Butaság, le fog róla lógni a szöveg, itt érdemes automatikusan hagyni.

Ha ezt pluszban belerakod a codepen css-be, akkor nem lesz szétesve. Ha ügyesebb vagy, akkor ez alapján át tudod írni az eredeti kódot.

.calendar{

min-width: 450px;

max-width: 100%;

height: auto;

}

.calendar p{

margin: 0;

padding: 0;

}

.month{

width: auto;

}

Nem elég egy értéket átnézni, mert örökölnek tulajdonságokat az elemek. Próbálj meg videót nézni arról, hogy hogyan kell használni a fejlesztői eszközt a böngészőben. A Firefox meglehetősen jó html+css írása szempontjából! Még tippeket is ad, hogy miért nem vesz figyelembe egy-egy beállítást.

Illetve, ha úgysem méretezed át képernyőnek megfelelően a betű méretét, akkor a maximális szélességet is meg lehet adni pixelben.

.calendar{

min-width: 450px;

max-width: 450px;

height: auto;

}