I have the following bootstrap nav tabs:

```
<div class="container">
    <ul class="nav nav-tabs" id="projectTabStrip" role="tablist">
        <li class="nav-item" id="projectDetailsTab">
            <a class="nav-link">Project Details</a>
        </li>
        <li class="nav-item" id="projectStatusTab">
            <a class=nav-link>Status</a>
        </li>
        <li class="nav-item" id="projectDocumentsTab">
            <a class=nav-link>Documents</a>
        </li>
    </ul>
</div>

```

I removed all of the `href` tags for brevity and to make it easier to read.
My problem is that the tabs are displaying like this:
[![nav-tabs issue](https://i.stack.imgur.com/jT5mk.png)](https://i.stack.imgur.com/jT5mk.png)  

By default, the tabs should be on the left side of the page, correct? What is causing this issue?

My goal is to get the tabs to align to the left side of the page, something like this:[![nav-tabs correct](https://i.stack.imgur.com/lLlCg.png)](https://i.stack.imgur.com/lLlCg.png)