Problems with final project

<PLEASE USE THE FOLLOWING TEMPLATE TO HELP YOU CREATE A GREAT POST!>

<Below this line, add a link to the EXACT exercise that you are stuck at.>

<In what way does your code behave incorrectly? Include ALL error messages.>
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 http://getbootstrap.com/getting-started/) 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 a.active {
background-color: #62AF42;
}

  <title>Best eLearning</title>
</head>

<body>
	<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>
			</ul>
		</div>
	</div>

</body>

</html>
<do not remove the three backticks above>

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: css - Bootstrap 3.0 align navbar and logo to bottom - 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;
}