html - Div shrinks when border is removed -

i have problem. have following layout @ this weaver. (make sure view fullscreen- button @ bottom right.)

my problem this: when change border element(the border element in .centered selector--around lines 238-240) div appears shrink around content inside it. have background image, , there while border exists, when remove border element, image retracts well.

for better explanation, visit weaver above, , try removing line 239. see happens. unfortunately me, added border demonstrative purposes, , need removed, happens unacceptable.

i need stay without border(or if find way make invisible , have desired effect works too). please help! if i'm not being clear enough please let me know, , i'll make edit.

you can make border transparent via border-color attribute:

.borderless { border-color: transparent; } 

this can shortened single line other border related properties so:

.borderless { border: 2px solid transparent; } 

if prefer can transition smoothly to, consider rgba values:

.centered { border: 2px solid rgba(0, 0, 0, 1); } .borderless { border: 2px solid rgba(0, 0, 0, 0); } 

any of these methods maintain layout, border technically still present , taking space. if continue find having problems layouts shifting unexpectedly on you, try looking box sizing:

* { box-sizing: border-box; } 

will encourage layout elements wrap borders in computed sizes , make divisions behave in fashion that's more intuitive.