it's because you copy and pasted the first tab! which resulted in:

• two tab-pane's having active show
  • for this code, you only one of it
  • active show means "i want this to show up by default" so having multiple in the same "area" will cause that merging effect
• two misplaced </div>'s before the <div class="tab-pane fade" id="foggythree">
  • there should only be one (for the foggytwo tab) but there's three in total; move the extra two somewhere below
  • once you fix this, the character tab will appear normally rather than on top

(also not sure if the credit got eaten by the errors but if it got deleted, please add it back in!)

hope that helps! ^^