DukeyTreat DukeyTreat - 2 months ago 13
CSS Question

Bootstrap-tabs are uneven

I just started my own webpage using Bootstrap, and I immediately ran into an issue. My nav tabs are uneven like so:

SS

Here is my html:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<title>Jackson Lenhart Music</title>
</head>
<body>
<header class="container">
<div class="row text-center">
<h1>Jackson Lenhart Music</h1>
</div>
<div class="row">
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="homepage.html">Home</a></li>
<li role="presentation"><a href="#">Video</li>
<li role="presentation"><a href="#">Audio</li>
<li role="presentation"><a href="#">Lessons</li>
<li role="presentation"><a href="#">Contact</li>
</ul>
</div>
</header>
</body>
</html>


any ideas on how to fix this?

Answer

you are not closing the a tag inside the li

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<header class="container">
  <div class="row text-center">
    <h1>Jackson Lenhart Music</h1>
  </div>
  <div class="row">
    <ul class="nav nav-tabs">
      <li role="presentation" class="active"><a href="homepage.html">Home</a>
      </li>
      <li role="presentation"><a href="#">Video</a>
      </li>
      <li role="presentation"><a href="#">Audio</a>
      </li>
      <li role="presentation"><a href="#">Lessons</a>
      </li>
      <li role="presentation"><a href="#">Contact</a>
      </li>
    </ul>
  </div>
</header>

Comments