Seeking assistance with a Bootstrap issue. I'm attempting to convert the h1 and h3 tags "Jane (Doette and Front-End Ninja)" in my div to uppercase and align them on the right side. However, there seems to be a conflict preventing this from working properly. Can anyone help me debug this problem?
<!DOCTYPE html>
<html>
<head>
<title>Final Project</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href='http://fonts.googleapis.com/css?family=Lato:100,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<img class="img-responsive" alt="Udacity Logo" src="images/udacity-logo.jpg">
</div>
<div class="col-md-6 text-right text-uppercase">
<h1>Jane Doette</h1>
<h3>Front-End Ninja</h3>
</div>
</div>
<div class="row">
<div class="col-md-12">
<hr>
</div>
</div>
<div class="row">
<div class="col-md-12">
<img class="img-responsive" alt="main picture of a giraffe" src="images/animals690x350.jpg">
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2>Featured Image</h2>
</div>
</div>
<div class="row">
<div class="col-md-4">
<img class="img-responsive" alt="A cute little cat looks on with head turned to the side" src="images/cats325x300.jpg">
<h3>Cacho</h3>
<p><a href="https://www.google.com/?gws_rd=ssl" target="_blank">Check out beautiful Cacho</a>
</div>
<div class="col-md-4">
<img class="img-responsive" alt="A gorilla sits and looks into the distance" src="images/gorilla325x300.jpg">
<h3>Gorilla</h3>
<p><a href="https://www.google.com/?gws_rd=ssl" target="_blank">Check out this beastly creature</a>
</div>
<div class="col-md-4">
<img class="img-responsive" alt="A cat stands with an astonished and frightened look" src="images/animals325x300.jpg">
<h3>Blue-Eyed Cat</h3>
<p><a href="https://www.google.com/?gws_rd=ssl" target="_blank">Check out this blue-eyed cat</a>
</div>
</div>
</div>
</body>
</html>