I'm diving into the world of Bootstrap and I've created a menu, but it seems like the menu items are stacking vertically on the right side rather than aligning horizontally on the left. Can someone spot where I might have made an error?
Here is my HTML file:
<html>
<head>
<title>Register</title>
<link rel ="stylesheet" href="css/bootstrap.min.css"/>
<link rel ="stylesheet" href="css/main.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default " id="navbar">
<div class="container-fluid">
<div class = "navbar-header">
<a href="#" class="navbar-brand" id="text">Brand</a>
</div>
<ul class = "nav navbar-nav" >
<li><a href="" id="text"> Home <span class="caret"></span></a></li>
<li><a href="" id="text">Team</a></li>
<!-- <a href="" id="text">Gallery</a>
<a href="" id="text">Partners</a>
<a href="" id="text">News</a>
<a href="" id="text">Contact us</a>
<a href="" id="text">Register</a> -->
</ul>
</div>
</nav>
<div></div>
</body>
</html>
This is what's in my main.css file:
#navbar{
/*background color*/
background-color: #4311dd
}
/*change text color to white*/
#text{
color:#FFFFFF;
}
When I view the webpage, it looks like this:
https://i.sstatic.net/46wPN.jpg
If anyone can help pinpoint where I went astray, I would greatly appreciate it.