Please offer some advice and suggestions as to how to enable a mobile first responsive header. i cant seem to keep my content to the left when at mobile screen size also i need the header and back button to be the same size. Also when at a full screen size the header area doesn't spread. i use Flex-box but finding it difficult to align this particular content in the header. Any advise suggestions would be more than appreciated.
.header {
display: flex;
justify-content: space-between;
background: #633;
padding: 10px 10px;
}
.header a {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
justify-content: center;
}
.header a:hover {
color: black;
}
.logo {
display: flex;
align-items: flex-start;
transition: background 250ms ease-in-out, transform 150ms ease;
-webkit-appearance: none;
-moz-appearance: none;
}
.home-button {
display: inline-block;
border: none;
padding: 1rem 2rem;
margin-right: 20px;
border-radius: 4px;
text-decoration: none;
background: dodgerblue;
color: #ffffff;
font-family: sans-serif;
font-size: 1rem;
cursor: pointer;
text-align: center;
transition: background 250ms ease-in-out, transform 150ms ease;
-webkit-appearance: none;
-moz-appearance: none;
}
.header-right {
float: right;
}
a.home-button:hover,
a.home-button:focus {
background: #434344;
}
@media only screen and (min-width: 300px) {
.header,
.header a,
.home-button,
.logo {
display: flex;
justify-content: flex-start;
float: none;
display: block;
padding: 5px;
}
.header-right {
float: none;
}
}
/* end of header*/
/***********************************************
**********************************************
*********************************************/
/* Back button CSS*/
.button {
display: inline-block;
border: none;
padding: 1rem 2rem;
margin-right: 20px;
border-radius: 4px;
text-decoration: none;
background: dodgerblue;
color: #ffffff;
font-family: sans-serif;
font-size: 1rem;
cursor: pointer;
text-align: center;
transition: background 250ms ease-in-out, transform 150ms ease;
-webkit-appearance: none;
-moz-appearance: none;
}
.button:hover,
.button:focus {
background: #434344;
}
.button:focus {
outline: 1px solid #fff;
outline-offset: -4px;
}
.button:active {
transform: scale(0.99);
}<div class="header"><div class="header-right"><a href="" class="logo"><img src="images/cw_logo.png" alt="company-logo"> </a><a class="home-button" href="#home">Home</a><a class="email" href="email@emailyou.com">email@emailyou.com</a><a href="#about"><p>1234567890</p></a><button class="button" onclick="goBack()">Go Back</button></div></div>