html, body, #root { height: 100%; } .navbar { color: #ffffff; padding-left: 40px; background-color: #6272a4; padding: 5px 5px 5px 35px; } .outerContainer { display: flex; flex-direction: column; height: 100%; } .logo { height: 30px; width: 30px; margin-right: 10px; } a { color: inherit; } a i:hover { color: #f2f2f2; } footer { height: 40px; text-align: center; background-color: #ffffff; padding: 10px; font-size: 14px; border-top: 1px solid #cccccc; } @media screen and (max-width: 600px) { footer { margin-top: 40px; } }