Problems with final project


Hi Everyone, I'm just starting on my final project and didn't get very far without the crutch of codeacademy telling me what to do. The issue I'm having is that I can't get my nav bar to sit flush on the bottom border of the container the way that my logo is. It's possible that I linked in bootstrap incorrectly (I'm using CDN or that I am doing something else wrong, or a combination of both.

Could someone look at my code and give me their opinion? I have added a black background to the header just so that I can clearly see what's going on but I intend to change it to white once I have everything sorted out.

I'm attaching an image of what I have so far. I've played with margin and padding on almost every item tied to the nav bar. I'll probably style the nav bar a little more after I figure out how to get it to sit on the bottom border of the container.

Any help is greatly appreciated.

html, body {
	margin: 0;
	padding: 0;

.container {
	max-width: 1000px;

.header {
	margin: 0;
	padding: 0;
	background-color: #000;

.header .container {
	padding-top: 50px;

.header img {
	float: left;
	padding: 0 0;

.header .nav {
	background-color: #138BCD;
	border-radius: 0;
	float: right;
	padding-bottom: 0;

.header .nav ul {
	list-style: none;
	display: inline;

.header ul li {
	display: inline-block;


.header .nav a {
	color: #fff;

.header .nav a:hover {
	background-color: #62AF42;
	color: #fff;

.header {
	background-color: #62AF42;

      <link type="text/css" rel="stylesheet" href="css/main.css"/>
      <!--<link rel="stylesheet" href="" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">-->
      <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
      <title>Best eLearning</title>

    	<div class="header">
    		<div class="container">
    			<img src="img/generic-logo.jpeg" width="200" height="60">
    			<ul class="nav">
    				<li><a class="active" href="#">Home</a></li>
    				<li><a href="#">Courses</a></li>
    				<li><a href="#">Topics</a></li>
    				<li><a href="#">About</a></li>
                                <li><a href="#">Login</a></li>




looking at this screenshot:

for which i used the inspector, you can see both the image and navigation menu are at the same height, the reason the image extends to bottom is because its higher/taller then your navigation menu


I see that if I remove the image then the nav bar sits flush with the bottom. How would you suggest that I lower the nav bar without affecting the image so that they are both sitting flush with the bottom? I'm trying many different approaches but still haven't found a way. Probably something simple that is eluding me.


no, there is no simply solution, that is the problem. I am trying, but struggling as well


Ok, thanks. I'm glad it's not just me. I appreciate you trying.


well, you can use a table like i did here, the problem this creates, is how to align the navigation menu to the right


Thanks stetim. I might look into that one. If I figure out the current issue I'll post what I did.


I found the following post on stack overflow:

I used this code below and it seemed to work nicely. That's a video actually playing in the background of the screenshot. My next goal is to figure out how to tint it and throw some text over it. Think I found a few posts that can help me with that.

.nav {
margin-top: 18px !important;