As a newcomer to programming and completely new to HTML, I am currently working on a class project for my Web Development course. The task involves creating a webpage for a fictional company named "DW Gift Company." One of the requirements for this project is to include a navbar at the top (non-fixed) that directs to various sub-pages such as About, Items, Order, and more. However, I'm encountering difficulties with the navbar and I can't seem to get it to appear correctly.
Below is the code I have written so far. I have included the nav tag with what I believe are the correct classes, along with ul's and li's. I'm aware that ul stands for an unordered list, but I am not completely sure about what li represents. I have been following an online video tutorial by my professor and I am quite confident that I have accurately followed along and typed exactly as instructed. However, my navbar looks quite different from what is displayed in the tutorial (I have attached images of what it should look like, what mine looks like, and what the professor's looks like).
My written code is as follows:
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
<link rel="stylesheet" href="css/DWstyle.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<img src="C:\Users\Mason\Desktop\h4_starter\DWGiftLogo.png">
<nav class="navbar navbar-expand-lg navbar-light bg-beige">
<a class="navbar-brand">DW Gift Company</a>
<div class="collapse navbar-collapse" id="DWnavbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 5</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 6</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 7</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 8</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 9</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
The desired appearance is shown here.
This is what mine currently looks like.
And here is what my professor's navbar looks like.
I suspect that the appearance issue may be related to the bullets displayed next to the li's, but I'm uncertain.
Summary: I am struggling to create a navbar in HTML for a website as it does not match the expected design, despite closely following my instructor's code from the online tutorial.