header {
     width: 100%;
     box-sizing: border-box;
     padding: 20px;
     overflow: hidden;
}
.header-content {
     display: flex;
     flex-direction: column;
     align-items: center;
}
@media screen and (max-width: 500px) and (orientation: portrait) {
    header {
        padding: 10px;
    }
    .header-content {
        font-size: 1.1em;
    }

    .navbar {
        width: 100%;
        display: flex;
        padding-left: 30px;
    }
    .nav-item {
        margin-left: -8%;
        margin-right: 9%;

    }
}