The text next to the logo in the navbar isn't aligning properly (refer to this link for the page -> ).
Furthermore, the logo isn't positioning correctly either, and this issue is present in all the navbar codes. I'm utilizing CSS bootstrap for this, but I'm still in the learning stages. Any guidance on how to resolve this would be greatly appreciated.
body {
font-size: 16px;
color: #fff;
background-color: #F5EEE0;
font-family: 'Oxygen', sans-serif;
}
/** HEADER **/
#header-nav {
background-color: #AE7F60;
border-radius: 0;
border: 0;
}
#logo-img {
background: url('../images/coffee-shop-logo_large.png') no-repeat;
width: 150px;
height: 150px;
margin: 10px 15px 10px 0;
}
.navbar-brand {
padding-top: 25px;
}
.navbar-brand h1{ /*Restaurant name */
object-position: right;
font-family: 'Lora', sans-serif;
color: #B35840;
font-size: 1.5cm;
text-transform: uppercase;
font-weight: bold;
text-shadow: 1px 1px 1px #222;
margin-top: 0;
margin-bottom: 0;
line-height: .75;
}
.navbar-brand a:hover, .navbar-brand a:focus{
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>coffee cafe</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="index.html" class="pull-left visible-md visible-lg ">
<div id="logo-img" alt="Logo image"></div>
</a>
<div class="navar-brand">
<a href="index.html"><h1>Coffee Place</h1></a>
</div>
</div>
</nav>
</header>
<!-- jQuery (Bootstrap JS plugins depend on it) -->
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>