Div-ek mozgása nem megfelelő. Hogyan lehet kiküszöbölni ezt?

Ha lekicsinyítem a böngészőt a div-ek elmozdulnak, ez jó.

Viszont, ha vissza nagyítom, akkor ott is maradnak, nem ugranak vissza a helyükre.

Hasábos megoldást választottam, lehet rosszul tettem. Mellékelek képet és kódsort is.

Ilyen alapból: [link]

Ilyen kisméretben (tudom itt több dolog is csúszik, azt megoldom): [link]

Ilyen az amikor ismét teljes képernyőn van: [link]

<div class="hasab"><p class="cim"> szöveg szöveg </div>

.hasab{display:inline-block;}

Szal semmi durva, azt szeretném kérdezni, hogy mi kell ide, hogy az a helyén maradjék? Vagy totál más módon kéne megközelítenem?