Attempting to replicate the design of a website by starting with the navigation bar.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!--facebook icon-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
.navbarleft{
width: 40%;
}
.navbarmiddle{
font-size: 2rem;
margin: 0 auto;
width: 20%;
text-align: center;
}
.navbarright{
width: 40%;
float: right;
}
.navbar-nav{
padding-left: auto !important;
}
.fa{
float: right;
}
.navbar{
height: 10vh;
}
.middleitem{
margin: 0 auto;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-static-top navbar-expand-lg navbar-light">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav navbarleft">
<li class="nav-item">
<a class="nav-link" href="#">NEWS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">MUSIC</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">VIDEO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">PHOTOS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">STORE</a>
</li>
</ul>
<ul class = "navbar-nav navbarmiddle" style="margin: 0 auto; text-align: center;">
<span class="middleitem">2 CHAINZ</span>
</ul>
<ul class = "navbar-nav navbarright navbar-right" style="float: right;">
<li class="nav-item">
<a href=# class="fa fa-facebook"></a>
</li>
</ul>
</div>
</nav>
<div></div>
<br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body></html>
Encountering two issues with the layout design. Firstly, struggling to position 2 CHAINZ at the center of its parent ul element. Attempts using margin: 0 auto; and text-align: center; have been unsuccessful.
Secondly, trying to align the facebook icon to the right by using float: right; without success. Any assistance would be greatly appreciated. Thank you!
Additionally, faced difficulties in displaying the navbar on a jsfiddle http://jsfiddle.net/raua0Lku/, although it functions correctly in Chrome on my laptop. Any insights into this issue would be helpful.
Update:
Managed to center the 2 CHAINZ but still struggling with positioning the facebook icon to the right.