Just dipping my toes into web development and experimenting with Bootstrap. Here's a snippet of my code:
<!DOCTYPE html>
<html>
<head>
<title>IMAGE GALLERY</title>
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<style type="text/css" media="screen">
.navcolor{
background-color: #042638;
}
.textcolor{
color: white;
}
.align{
margin-left: 80px;
}
.one{
width: 40px;
height: 40px;
color:white;
}
</style>
</head>
<body>
<nav class=" navbar navabar-default navcolor ">
<div class="navbar-header">
<img class="one align" src="https://www.pngkey.com/png/full/212-2129758_ios-gallery-icon-png.png" >
<a href="#" class="navbar-brand textcolor ">IMGS</a>
</div>
<ul class="nav navbar-nav ">
<li><a class="textcolor" href="#">About</a></li>
<li><a class="textcolor" href="#">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a class="textcolor" href="#">Sign Up</a></li>
<li><a class="textcolor" href="#">Login</a></li>
</ul>
</nav>
</body>
</html>
I'm aware that separating the CSS into its file would be ideal, but for now, I wanted to try something quick. It may look simple, but I was hoping for this. Instead, what I got was this. Disregarding the logo, my concern is how 'About' and 'Contact' are overlapping and somehow centered. I attempted 'navbar-left' and 'pull-left', but it still remains centered. Any assistance would be greatly appreciated.