CSS Header - Different Alignment - html

Question

Image of Webpage
I want to add them to the same line so the header looks more tidy, what would be the correct code to use?
.header{
border-bottom:1px solid #eee;
padding:10px 0px;
width:100%;
text-align:left;
}
.header a{
color:#333;
text-decoration: none;
margin-left: 20px;
}
.phone {
text-align: right;
font-weight: bold;
padding-right: 20px;
align-content: right;
}
<div class="header">
Home
Products
<div class="phone"><a>Freephone: 0800 096 1617</a></div>
</div>

Answer 1

You can achieve that with float. Left for the the ones you want to go left, right for the phone number, and a overflow: hidden for the header.
.header{
border-bottom:1px solid #eee;
padding:10px 0px;
overflow: hidden;
width: 100%;
}
.header a{
color:#333;
text-decoration: none;
margin-left: 20px;
float: left;
}
.phone {
font-weight: bold;
margin-right: 20px;
float: right;
}
<div class="header">
Home
Products
<div class="phone"><a>Freephone: 0800 096 1617</a></div>
</div>

Answer 2

you should insert the Freephone: 0800 096 1617 to div class header and use Css position:absolute; right:(you can manipulate it to fix the freephone);
<div class="header">
Home
Products
<a class="freephone">Freephone: 0800 096 1617</a>
<div class="phone"></div>
</div>

Answer 3

.header{
border-bottom:1px solid #eee;
padding:10px 0px;
width:100%;
float:left;
}
.header a{
color:#333;
text-decoration: none;
margin-left: 20px;
}
.phone {
font-weight: bold;
padding-right: 20px;
float:right;
}
<div class="header">
Home
Products
<div class="phone"><a>Freephone: 0800 096 1617</a></div>
</div>
You have to add float:left; to .header class and add float:right; to .phone class

Answer 4

Use floating instead. The .clear class means to stop floating and it is neccessary. Also the phone does not need to be inside of a div and should have the id of phone instead of class of phone because there is only one phone element. You do not need the alignment and text-alignments at all.
.header {
border-bottom: 1px solid #eee;
padding: 10px 0px;
width: 100%;
}
.header a {
color: #333;
text-decoration: none;
margin-left: 20px;
float: left;
}
#phone {
font-weight: bold;
padding-right: 20px;
float: right !important;
}
.clear {
clear: both;
}
<div class="header">
Home
Products
<a id="phone">Freephone: 0800 096 1617</a>
<div class="clear"></div>
</div>
Hope this works as it wasn't tested because I am on mobile right now.