body { display: flex; flex-direction: column; background-color: #D8CCAF; margin: 0; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif; } #header { height: 80px; line-height: 80px; text-align: center; background-color: #575757; font-size: 2em; color: #ffffff; padding: 15px; } #header h2 { margin: 0; } #nav { color: white; height: 50px; line-height: 50px; text-align: center; background-color: #E49A2F; overflow: auto; } #nav a { color: white; } #content { display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center; flex-grow: 1; background-color: #D8CCAF; } #content_left, #content_right { box-sizing: border-box; flex-grow: 0; flex-shrink: 0; flex-basis: calc(50% - 40px); margin: 10px; background-color: #F7F5EE; border: 1px; padding: 10px; border-radius: 25px; border-color: #AC9675; } @media screen and (min-width: 769px) { #content { flex-direction: row; } } .kuva { width: calc(100% - 20px); max-width: 350px; height: auto; display: block; margin: 0 auto; } #footer { height: 50px; line-height: 50px; background-color: #E49A2F; color: #ffffff; text-align: center; font-size: 12px; }