.header { margin: auto; padding: 1.5rem; padding-bottom: 0.5rem; text-align: center; display: flex; font-size: large; overflow: hidden; height: auto; } .logo { display: flex; height: 3.5rem; } .header-items { margin: auto; /* padding-right: 1rem; margin-right: 0px; */ margin-left: 0px; display: flex; float: right; right: 0px; align-items: right; text-align: right; } .header-items .menu-icon { display: none; font-size: larger; } .header-item { margin-left: 2.5rem } .dropdown { float: left; overflow: hidden; } .dropdown .dropbtn { border: none; outline: none; margin: 0; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color: #ddd; } .dropdown:hover .dropdown-content { display: block; } @media screen and (max-width: 600px) { .header-items .dropdown .dropbtn { display: none; } .header-items .header-item { display: none; } .header-items a.menu-icon { float: right; display: block; } } @media screen and (max-width: 600px) { .header-items.responsive {position: relative;} .header-items.responsive .menu-icon { position: absolute; right: 0; top: 0; } .header-items.responsive a { float: none; display: block; text-align: left; } .header-items.responsive .dropdown {float: none;} .header-items.responsive .dropdown-content {position: relative;} .header-items.responsive .dropdown .dropbtn { display: block; width: 100vw; text-align: left; } .header-items.responsive .header-item { display: block; width: 100vw; text-align: left; } }