Bootstrap: Header moves when modal opens

Question

I am using the Bootstrap framework and having some trouble with my header and modals. The header on my page is fixed and when a modal opens it moves a few pixels to the right and moves back again when the modal closes.

An example is shown here: http://jsfiddle.net/D2RLR/7400/

I would like it to not move at all. I know this is caused by the scrollbar which is why the container in the fiddle is set to 2000px. Any ideas to how I can solve this problem?

The code is the following:

HTML

<div class="container">

   <header>
    <nav id="menu" class="dl-menuwrapper">
    <a href="#" class="menu-toggle dl-trigger"><i class="fa fa-reorder"></i></a>
      <ul class="dl-menu">
        <li>
         <a href="#home" class="scroll"><i class="fa fa-home"></i>Home</a>
        </li>
        <li><a href="#profile" class="scroll"><i class="fa fa-user"></i>Profile</a></li>
      </ul>
    </nav>

  </header>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

CSS

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css');

.container {
    margin-top: 10px;
}

button {
    margin-top:100px;
}

.modal-content {
     height:500px;   
}

header {
        width: 150px;
        margin:auto;
        left:0;
        right:0;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
        text-align: center;
        position: fixed;
        background-color:rgba(0, 0, 0, 0.90);
        z-index: 2;
    }

Answer 1

Simple Fix

.modal-open {
  position: fixed;
  overflow: scroll;
  width: 100%;
  padding-right: 0!important;
}