html - what is wrong with my code?

Question

<div class="row">
<div class="container">
  <div class="col-md-4 col-md-offset-4">
    <div class="login-wrapper">
        <div class="login-head">
          <h3 class="text-center"> Log in </h3>
        </div>

        <form>
          <div class="form-group">
            <label for="email" class="sr-only"> Email </label>
            <input type="text" placeholder="email here" class="form-control">
          </div>

          <div class="form-group">
            <label for="email" class="sr-only"> Password </label>
            <input type="text" placeholder="Password here" class="form-control">
          </div>

          <button type="button" class="btn btn-danger center-block"> Login </button>

        </form>

    </div>
  </div>
</div>
</div>

After this code i got scroll bar in my browser so i inspect and found that if i make change

.row { margin-right: 0;} 

it is just fine. It is nothing to do with my css i removed my css and tried. so should i change the value of .row all the time which is provided by bootstrap? default value is

.row{margin-right: -15px;}

EDIT: Code is formatted like code now

Answer 1

As mentioned in Bootstrap docs, container should be a top level wrapping class, which should contain class row. You've swapped these classes. I think this is the reason of issue.

First rule of bootstrap introduction says:

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.

Code should look:

<div class="container">
<div class="row">
  <div class="col-md-4 col-md-offset-4">
    <div class="login-wrapper">
        <div class="login-head">
          <h3 class="text-center"> Log in </h3>
        </div>

        <form>
          <div class="form-group">
            <label for="email" class="sr-only"> Email </label>
            <input type="text" placeholder="email here" class="form-control">
          </div>

          <div class="form-group">
            <label for="email" class="sr-only"> Password </label>
            <input type="text" placeholder="Password here" class="form-control">
          </div>

          <button type="button" class="btn btn-danger center-block"> Login </button>

        </form>

    </div>
  </div>
</div>
</div>