My goal is to have a navbar that is always centered and displayed at the top of the screen. However, every time I try to fix it, something goes wrong and the text gets all smushed together. I want the navbar to be straight across without any overlap between the "Home" button and the image. Thank you for your help.
Check out how it looks when centered
This is how I would like it to look, but not centered
<!doctype html>
<html lang="en">
<head>
<title>The Benjamin Project | Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/static/assets/css/animate.css">
<link rel="icon" href="/static/assets/img/favicon.ico"> <!-- site icon -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="/static/assets/script.js"></script>
<style>
@font-face {
font-family: Panton;
src:url("/static/assets/font/Panton-LightCaps.otf");
}
body {
margin: 0;
padding: 0;
background-color: #8CD28C;
overflow-x: hidden;
min-height:75px;
line-height:75px;
}
.navbar {
margin: 0;
border-radius: 0;
background-color: #8CD28C; /*bg color for tabs on navbar*/
color: #606060; /*text color for tabs on navbar*/
padding: 50px 0px 50px 0px;
font-size: 2em;
font-family:Panton;
border: 0;
animation-duration: 1.5s;
}
.navbar-default .navbar-nav .active a, .navbar-default .navbar-nav .active a:focus, .navbar-default .navbar-nav .active a:hover {
color: #606060; /*text color for active*/
background-color: #8CD28C; /*bg color for active*/
font-weight: bold;
}
.selected {
text-decoration-line:underline;
}
.navbar .navbar-brand img {
border-radius: 360%; /*rounds image*/
margin-top: -55px;
margin-right: 10px;
}
.navbar-default .navbar-nav li a {
color: #606060; /*non active colors*/
font-weight: bold;
}
.navbar-default .navbar-nav li a:hover {
color: #606060; /*color of text being hovered over*/
background-color: inherit;
text-decoration: underline;
}
.row {
margin-top: 3%;
padding-left: 20%;
padding-right: 20%;
animation-duration: 2s;
}
.row hr {
display: block;
height: 1px;
border: 0;
border-top: 2px solid #606060;
border-radius: 100%;
margin: 1em 0;
padding: 0;
}
.center{
width:50%;
max-width:960px;
margin:0 auto;
}
</style>
</head>
<body>
<nav class="navbar navbar-default fadeInDown animated navbar-static-top center">
<div class="container-fluid">
<div class="navbar-header navbar-left">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <!-- navigation button on mobile -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="https://imgur.com/k8SlOAa.png" allign="middle" width="125" height="125"></a> <!-- benjamin logo alt="Benjamin Logo"-->
</div>
<div class="collapse navbar-collapse navbar-left center" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active selected"><a href="/">Home</a></li> <!-- labels on navigation bar -->
<li><a href="/commands">Commands & Info</a></li>
<li><a href="/about">About</a></li>
<li><a href="/home/views/benjamins.html">Benjamins</a></li>
<li><a href="/account/login">Login</a></li>
</ul>
</div>
</div>
</nav>
<script type="text/javascript" src="/static/assets/script.js"></script>
<page class="main">
<div class="row fadeIn animated"><hr></div>
</page>
</body>
</html>