body { margin: 0; } img { width: 150px; height: 30px; } a { text-align: center; line-height: 2; color: white; text-decoration: none; } .loginn { background-color: skyblue; border-radius: 31px; border: 1px solid skyblue; cursor: pointer; color: #ffffff; font-family: Arial; text-decoration: none; height: 30px; } header { display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between; background-color: #0f64f2; margin: auto; padding-top: 10px; padding-bottom: 10px; padding-right: 30px; padding-left: 10px; } header>p { text-align: center; line-height: 0; } .container { height: 100%; width: 100%; display: flex; justify-content: flex-end; } .eventHeader { text-align: center; padding-top: 5px; padding-bottom: 5px; } .event { background-color: #0f64f2; color: white; border-style: solid; border-width: 2px; margin-top: 25px; margin-right: 25px; flex-direction: column; flex-wrap: wrap; height: auto; } .eventInside { background-color: white; color: #4C8BF5; height: auto; border: solid; border-color: lightgray; padding: 10px; } .eventInside>p { color: lightgray; } .myButton { background-color: #4C8BF5; border-radius: 28px; border: 1px solid #4C8BF5; display: inline-block; cursor: pointer; color: #ffffff; font-family: Arial; font-size: 9px; padding: 8px 13px; text-decoration: none; } @media all and (max-width: 800px) { header { justify-content: space-around; } } @media all and (max-width: 800px) { header { flex-direction: colum; } }