Modifying bootstrap not working quite right

Okay, so. I've gone through a bunch of videos on this site, and I decided I wanted to make myself a website.

I decided to start with bootstrap, and see where that takes me. So far so good... it looks like this: http://img.photobucket.com/albums/v255/leamarschein/website1_zps3aa3b2c6.png

But I ran into a problem. Well 2 problems.

The first one happens when I shrink down the size of my browser. Everything flows nicely, and all: http://img.photobucket.com/albums/v255/leamarschein/website2_zps7c5743be.png

BUT for some reason I can' change the border color of the drop down menu's icon. I was able to change the border style, the background color, the border style even... BUT NOT the border COLOR. Even though I manipulated bootstrap's CSS, the color stayed black (where as everything else I changed... changed accordingly).

http://img.photobucket.com/albums/v255/leamarschein/website3_zps5ce02e3d.png

Why? I'm so confused :(

Now, on to problems numero dos: I'm trying to make each of my website's "subsections", like blog, contact, playground... in different color schemes, like so:

http://img.photobucket.com/albums/v255/leamarschein/website4_zpsb6259bf7.png

But unfortunately, for some reason, I can't change the background color of the navigation elements (the li elements on the right).

For this, I can't really go into the bootstrap's css, because I've manipulated that one to look the way the homepage does (I know, I really shouldn't have done that, but it's my first time, okay?).

Now the problem I'm facing, is that in my own CSS file that's overriding the bootstrap one, I think I'm doing the right thing to target the li elements: HTML: <div class="navbar navbar-inverse navbar-fixed-top h_nav blog_nav"> <div class="container"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="navbar-brand h_title"><a href="index.html">hellosunschein*</a></div> <div class="nav-collapse collapse"> <ul class="nav navbar-nav pull-right h_nav_nav_blog"> <li><a href="blog.html">Blog</a></li> <li><a href="contact.html">Contact</a></li> <li><a href="playground.html">Playground</a></li> <li><a href="resources.html">Resources</a></li> </ul> </div><!--/.nav-collapse --> </div> </div> CSS: ul.h_nav_nav_blog > li:hover { font-family: georgia; background-color: purple; }

This is how it ends up looking when I hover over it: http://img.photobucket.com/albums/v255/leamarschein/website5_zps25713140.png

As you can see the font-family does get changed (which is why I believe there's nothing wrong with how I'm targeting the elements), but the background color does not.

Can anyone explain why this is happening :(? I'm at my wits' end.