CSS - Header elements not floating properly when re-sizing - html

Question

I'm currently adding all media queries to a site and I'm stuck with some of the header elements that refuse to float properly when I resize below 480px to mobile-wide. I want my Logo to stretch across the page and all the other elements to float on top of each other. At the moment the phone/email are side by side and social media icons are stuck on the left and won't display inline across the page. I've tried all variants of display rules but they won't budge.
body {
font-family: "Merriweather Sans", sans-serif;
font-size: 16px;
line-height: 1.5;
color: #333333;
}
body {
margin: 0 auto 0 auto;
}
.container {
margin: auto;
max-width: 100%;
padding-left: 10px;
padding-right: 10px;
}
header {
background: #ffffff;
height: 100px;
top: 0;
z-index: 10;
}
.left-header {
background: white;
width: 50%;
float: left;
height: 100px;
}
.right-header {
background: white;
width: 50%;
float: right;
height: 50px;
}
.right-header-top {
background: white;
float: right;
width: 100%;
height: 100%;
margin-right: 100px;
}
.right-header-bottom {
background: white;
float: left;
width: 100%;
height: 100%;
}
#logo {
margin-left: 60px;
margin-top: 50px;
}
nav {
float: left;
font-weight: 400;
}
nav a {
color: #000000;
text-decoration: none;
display: inline-block;
margin-top: 15px;
margin-right: 25px;
font-size: 12px;
}
div#contact {
float: right;
margin-right: 20px;
}
div#contact img {
display: inline-block;
border: 10px;
margin: 20px;
width: 30px;
height: 30px;
}
div#contact p {
display: inline-block;
margin-top: 25px;
font-size: 10px;
}
.right-header-bottom i {
height: 10px;
width: 10px;
border: 15px;
float: left;
margin-top: 15px;
margin-right: 10px;
margin-left: 10px;
}
a {
color: #000000;
text-decoration: none;
}
a:hover {
color: #000000;
}
#media screen and (max-width: 1000px) {
div.container {
float: none;
margin: 0 20px 0 20px;
}
div.column {
float: none;
}
}
#media screen and (max-width: 480px) {
header {
float: none;
height: auto;
}
nav {
float: none;
text-align: center;
padding-bottom: 10px;
padding-top: 10px;
}
nav a {
display: block;
}
.right-header {
height: auto;
width: auto;
}
.right-header-top {
float: none;
}
.right-header-bottom {
float: none;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<header>
<div class="left-header">
<img src="http://localhost:8888/wp-content/uploads/2017/07/Logo.png" alt="logo" id="logo" style="width:250px;height:30px;">
</div>
<div class="right-header">
<div class="right-header-top">
<div id="contact">
<img src="http://localhost:8888/wp-content/uploads/2017/07/phone.png">
<p>0113 220 5265</p>
<img src="http://localhost:8888/wp-content/uploads/2017/07/email.png">
<p>hello#featuremedia.co.uk</p>
</div>
</div>
<div class="right-header-bottom">
<nav>
HOME
PORTFOLIO
PRODUCTS
ABOUT
CONTACT
BLOG
</nav>
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
<i class="fa fa-youtube-play" aria-hidden="true"></i>
<i class="fa fa-linkedin" aria-hidden="true"></i>
</div>
</div>
</header>
Here's how it looks -

Answer 1

You've got a lot of floats to kill.
A few things to display block and some text to align enter.
body {
font-family: "Merriweather Sans", sans-serif;
font-size: 16px;
line-height: 1.5;
color: #333333;
}
body {
margin: 0 auto 0 auto;
}
.container {
margin: auto;
max-width: 100%;
padding-left: 10px;
padding-right: 10px;
}
header {
background: #ffffff;
height: 100px;
top: 0;
z-index: 10;
}
.left-header { background:white; width:50%; float:left; height: 100px; }
.right-header { background:white; width:50%; float:right; height: 50px; }
.right-header-top { background: white; float: right; width: 100%; height: 100%; margin-right: 100px; }
.right-header-bottom { background: white; float: left; width: 100%; height: 100%; }
#logo {
margin-left: 60px;
margin-top: 50px;
}
nav {
float: left;
font-weight: 400;
}
nav a {
color: #000000;
text-decoration: none;
display: inline-block;
margin-top: 15px;
margin-right: 25px;
font-size: 12px;
}
div#contact {
float: right;
margin-right: 20px;
}
div#contact img {
display: inline-block;
border: 10px;
margin: 20px;
width: 30px;
height: 30px;
}
div#contact p {
display: inline-block;
margin-top: 25px;
font-size: 10px;
}
.right-header-bottom i {
height: 10px;
width: 10px;
border: 15px;
float: left;
margin-top: 15px;
margin-right: 10px;
margin-left: 10px;
}
a {
color: #000000;
text-decoration: none;
}
a:hover {
color: #000000;
}
#media screen and (max-width: 1000px) {
div.container {
float: none;
margin: 0 20px 0 20px;
}
div.column {
float: none;
}
}
#media screen and (max-width: 480px) {
header {
float: none;
height: auto;
}
nav {
float: none;
text-align: center;
padding-bottom: 10px;
padding-top: 10px;
}
nav a {
display: block;
}
.right-header {
height: auto;
width: auto;
}
.right-header-top {
float: none;
}
.right-header-bottom {
float: none;
}
}
/* Added Styles */
.left-header {
display: block;
float: none;
width: 100%;
height: auto;
}
img#logo {
min-width: 100%;
margin: auto;
height: auto !important;
}
.right-header {
display: block;
float: none;
width: 100%;
height: auto;
}
div[class*="header"] {
display: block;
float: none;
width: 100%;
height: auto;
text-align: center;
}
div#contact {
float: none;
display: block;
width: 100%;
margin: auto;
text-align: center;
}
header {
height: auto;
}
body {
max-width: 500px;
border: 1px dashed #ccc;
min-height: 400px;
}
nav {
float: none;
width: 100%;
text-align: center;
}
.right-header-bottom i {
float: none;
}
/* Centered Nav, Email & Phone */
h1 {
text-align: center;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ddd;
margin-bottom: 0px;
margin-top: 100px;
}
h1 {
text-align: center;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ddd;
margin-bottom: 0px;
margin-top: 100px;
}
div#contact
> div img {
margin: auto;
}
div#contact
> div p {
margin: auto 10px;
line-height: 3em;
vertical-align: top;
}
div#contact
> div:first-of-type {
margin-bottom: 10px;
}
nav.block a {
display: block;
margin: 10px auto;
}
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
<div class="left-header">
<img src="https://placehold.it/500x100" alt="logo" id="logo" style="width:250px;height:30px;">
</div>
<div class="right-header">
<div class="right-header-top">
<div id="contact">
<img src="https://placehold.it/50x50">
<p>0113 220 5265</p>
<img src="https://placehold.it/50x50">
<p>hello#featuremedia.co.uk</p>
</div>
</div>
<div class="right-header-bottom">
<nav>
HOME
PORTFOLIO
PRODUCTS
ABOUT
CONTACT
BLOG
</nav>
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
<i class="fa fa-youtube-play" aria-hidden="true"></i>
<i class="fa fa-linkedin" aria-hidden="true"></i>
</div>
</div>
</header>
</body>
<h1>Center Nav, Email & Phone</h1>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
<div class="left-header">
<img src="https://placehold.it/500x100" alt="logo" id="logo">
</div>
<div class="right-header">
<div class="right-header-top">
<div id="contact">
<div>
<img src="https://placehold.it/50x50">
<p>0113 220 5265</p>
</div>
<div>
<img src="https://placehold.it/50x50">
<p>hello#featuremedia.co.uk</p>
</div>
</div>
</div>
<div class="right-header-bottom">
<nav class="block">
HOME
PORTFOLIO
PRODUCTS
ABOUT
CONTACT
BLOG
</nav>
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
<i class="fa fa-youtube-play" aria-hidden="true"></i>
<i class="fa fa-linkedin" aria-hidden="true"></i>
</div>
</div>
</header>
</body>

Answer 2

get rid of float: right on div#contact and change display: inline-block to display: block on nav a
-OR-
Use this CSS for your nav:
nav {
display: flex;
flex-direction: column;
}
nav a {
align-self: center;
}
And you still have to kill the float on the header.
Here is a useful fiddle I keep in my bookmarks for flexbox reference. It shows everything flexbox can do and makes it relatively easy to understand:
https://codepen.io/enxaneta/full/adLPwv