I am struggling with the whole concept of bootstraps. If there is anyone out there who can provide some guidance, I would greatly appreciate it.
Unfortunately, my style sheet is unable to connect to this website.
The appearance of my navigation bar currently resembles this, but it should actually look like this.
I sincerely hope someone can assist me in resolving this issue!
* {
font-family: 'Oxygen', sans-serif;
background-color: maroon;
}
/** Header **/
#header-nav {
background-color: #f6b319;
border-radius: 0;
border: 0;
}
#logo-img {
background: url('../images/flying-cat.png') no-repeat;
width: 150px;
height: 150px;
left: 15px;
background-size: contain;
margin: 10px 10px 10px 10px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Oxygen:300,400,700" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="index.html" class="navbar-brand">
<div id="logo-img"></div>
</a>
</div>
</div>
</nav>
</div>
</div>
</nav>
</header>
</body>
</html>