当我点击模态（立即申请按钮）时，页面的CSS正在变化

Question

当我点击模态（立即应用按钮）时，页面的CSS正在改变，即页面的内容向左移动。这是我试过的代码。我将此模型作为应用作业按钮包含在另一页中。当我点击这个应用工作按钮时，页面的CSS正在改变，即内容移动左侧请帮帮我!!!!!!

的CSS：

.modal {
position: fixed;
right: o;
}
.modal-header,
.btn-custom {
background: #12BBF0;
color: #FFF;
/* margin-right: 10px; */
}
.modal-body {
padding-top: 5px;
}
.modal-content1 {
height:530px;
width:500px;
background-color:white;
padding-top:5px;
}  
.modal-header1
 {
background: #f2f2f2;
color: black;
height:65px;
padding-top:6px;
/* margin-right: 10px; */
}
.modal-body {
}
.popover   {
background-color: #12BBF0;
color: #ecf0f1;
width: 120px;
}
.popover.right .arrow:after {
border-right-color: #e74c3c;
}
.input-group[class*="col-"] {
padding-right: 15px;
padding-left: 15px;
}
.modal-content {
height:530px;
width:900px;
}     

///html
<div class="col-md-4">
<a href="#myModal1" role="button" class ="btn btn-info" id="applyj" type="submit"  data-toggle="modal"><b>Apply For Job</b></a>
 <!-- Modal -->
 <div id="myModal1" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content1">
<div class="modal-header1">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<center><h3>Apply For This Job</h3></center>
</div>
<div class="row">
<div class="col-md-12">
<div class="modal-body">
{{#if currentUser}}
<form role="form" class="form-horizontal" id="email-form">
<div class="row">
<div class="gh">
 <div class="form-group">
<label>Contact Email</label>
<input type="email"  class="form-control"  name="email" value="{{ctemail}}"
                        id="inputEmail">
</div>  
<div class="form-group">
<label>Applying for the Position of</label>
 <input type="text"  class="form-control"  name="email" value="{{title}}"
                        id="inputPost">
</div>  
<div class="form-group">
<label>Contact Name</label>
<input type="text"  class="form-control"  name="email" value="{{ctname}}"
                        id="inputName">
 </div>  
<div class="form-group">
 <label>expiry Date</label>
  <input type="text"  class="form-control"  name="email" value="{{jobexpiry}}"
                        id="expirydate">
 </div>  
 <br>
   <button class="btn-lg btn-success apply-button" id="color4" type="submit"  doc="{{_id}}">Submit Resume and Apply</button>
</div>
</div>
</form> 
{{else}}
<center><h3> Sign In to Find New Jobs and Apply</h3></center>
<form class="form-horizontal" role="form">
<div class="row">
<div class="il">
<br>
<center>
<div class="form-group">
<input type="email" class="form-control" name="email" id="user" placeholder= "e.g. john@example.com" required>
</div>
<div class="form-group">
 <input type="password" class="form-control" name="password" id="user" placeholder="Password" required>
</div>
<br>
<center>
<button class ="btn btn-info" id="color1" type="submit"><b>Log In</b></button>
</center>
<br>
<p><h5><b>Need an account?</b>&nbsp;&nbsp;&nbsp; <a href="{{pathFor 'register'}}"><b>Register</b></a></h5></p>
<br>
<p><h5><b>Forgot Your Password?</b>&nbsp;&nbsp;&nbsp;<a href="{{pathFor 'recoverPassword'}}" ><b>Reset Password</b></a></h5></p>
</center><br><br>
</div>
</div>
</form> 

</div><!-- End of Modal body -->
</div> <!-- grid division-->
</div> <!--grid row close-->
</div><!-- End of Modal content -->
</div><!-- End of Modal dialog -->
</div><!-- End of Modal -->