Background issue with div - html

Question

I have 2 different partial views that I am calling in my main view like this:
<div class="col-md-6">
#Html.Action("Chart", "Teams")
</div>
<div class="col-md-6">
#Html.Action("SeriesWinsChart", "Teams")
</div>
<div class="next-game">
<h3 class="text-center">The Next Game Is:</h3>
</div>
<br />
<div class="text-center">
<h3 style="color:red;">#ViewBag.NextGame</h3>
</div>
Now my problem is this:
All I have done is put background-color: green in my CSS for the class .next-game (honestly just to see what it looked like.. green is not what I am going to use)... I have gone into Inspect Element on IE and I cannot find the problem as to why the background is so big. I just want the background to be around The Next Game Is:
CSS:
.next-game{
background-color: green;
}
How do I shrink the background? I have tried width: 50%; height: 10px; //etc just to see the different changes but can't figure this out
UPDATE:
I have changed the HTML to:
<div class="next-game">
<h3 class="text-center">The Next Game Is:</h3>
<div class="text-center">
<h3 style="color:red;">#ViewBag.NextGame</h3>
</div>
</div>
<div class="col-md-6">
#Html.Action("Chart", "Teams")
</div>
<div class="col-md-6">
#Html.Action("SeriesWinsChart", "Teams")
</div>
This at least made the background render properly. So this has something to do with the partial views?

Answer 1

The most likely cause for this issue is that your twitter bootstrap columns have no wrapping row. You generally need all three (container, row, column) for it to render properly. What you're running into here is probably a clearfix issue. The columns are floated, which makes the next available non-floating element appear to "wrap" them. Below is a possible solution to the problem.
<div class="container">
<div class="row">
<div class="col-md-6">
#Html.Action("Chart", "Teams")
</div>
<div class="col-md-6">
#Html.Action("SeriesWinsChart", "Teams")
</div>
</div>
</div>
<div class="next-game">
<h3 class="text-center">The Next Game Is:</h3>
</div>
<br />
<div class="text-center">
<h3 style="color:red;">#ViewBag.NextGame</h3>
</div>
Other solutions include adding a .clearfix class to a wrapper for the columns or adding clear:both to .next-game.

Answer 2

You need
.next-game h3{
background-color: green;
}
(it's just for the header h3 inside the element with that class .next-game)