Row inside tabpane

Question

When I add a row in a tab-pane the content of that row seems to have a negative margin crossing the borders of the tab-pane edge.

How can I add rows (and columns) inside a tab-pane ?

Beneath is my HTML:

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />

<h3>Profil/Virksomhedsdata</h3>
<nav class="navbar navbar-default" role="navigation">
  <ul class="nav nav-tabs" id="myTab">
    <li role="presentation" class="active"><a href="#profil" data-toggle="tab">Profil</a>
    </li>
    <li role="presentation"><a href="#autoristation" data-toggle="tab">Autoristationsområder</a> 
    </li>
    <li role="presentation"><a href="#abonnement" data-toggle="tab">Abonnement</a>
    </li>
  </ul>
  <div id="myTabContent" class="tab-content" style="padding-left:5px;padding-top:5px;">
    <div class="tab-pane fade in active" id="profil">
      <form role="form" class="form-horizontal">
        <div class="row">
          <div class="form-group">
            <label class="control-label col-sm-1" for="email">Email:</label>
            <div class="col-sm-10">
              <input type="email" class="form-control" id="email" placeholder="Enter email">
            </div>
          </div>
          <div class="form-group">
            <label for="pwd" class="control-label col-sm-1">Password:</label>
            <div class="col-sm-10">
              <input type="password" class="form-control" id="pwd" placeholder="Enter password">
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</nav>

Answer 1

You're missing a container-fluid class inside you tab navigation:

<h3>Profil/Virksomhedsdata</h3>
<nav class="navbar navbar-default" role="navigation">
  <ul class="nav nav-tabs" id="myTab">
    <li role="presentation" class="active"><a href="#profil" data-toggle="tab">Profil</a></li>
    <li role="presentation"><a href="#autoristation" data-toggle="tab">Autoristationsområder</a>     </li>
    <li role="presentation"><a href="#abonnement" data-toggle="tab">Abonnement</a></li>  
  </ul>
  <div id="myTabContent" class="tab-content" style="padding-left:5px;padding-top:5px;">
    <div class="tab-pane fade in active" id="profil">
      <div class="container-fluid"> <!-- Notice Here -->
        <form role="form" class="form-horizontal">
          <div class="row">     
            <div class="form-group">
              <label class="control-label col-sm-1" for="email">Email:</label>
              <div class="col-sm-10">
                <input class="form-control" id="email" placeholder="Enter email" type="email">
              </div>
            </div>
            <div class="form-group">
              <label for="pwd" class="control-label col-sm-1">Password:</label>
              <div class="col-sm-10">
                <input class="form-control" id="pwd" placeholder="Enter password" type="password">
              </div>
            </div>     
          </div>   
        </form>
      </div> <!-- End Here -->
    </div>    
  </div>
</nav>

This issue arose from using the class form-horizontal without a container, and for some odd reason that results in a negative margin on smaller screens. Here is an example live demo:

Bootply

Hope that helps!