Center justify Logo (Resposive)
/* HEADER FLEX LAYOUT */
.amplify-header .container {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding: 0.5rem 1rem;
}
/* LOGO AREA */
.amplify-header h1 {
flex: 1 1 100%;
text-align: center;
margin: 0.5rem 0;
}
.amplify-header h1 img {
max-width: 250px;
height: auto;
display: inline-block;
}
/* RIGHT SIDE (Contact, Search, etc.) */
.amplify-header nav {
flex: 1 1 100%;
display: flex;
justify-content: flex-end;
align-items: center;
flex-wrap: wrap;
margin-top: -2.5rem; /* Pull it up to share space with logo on wide screens */
}
/* Responsive stack on mobile */
@media (max-width: 768px) {
.amplify-header nav {
margin-top: 0;
justify-content: center;
}
}
.amplify-header .container h1 img {
height: auto;
width: 170px;
}
</style>