如果页面放大或缩小，div标签不会保持固定

Question

我有一个bootstrap模板html代码：

<section id="main-content">
  <section class="wrapper">
    <h3><i class="fa fa-angle-right"></i>Create New Space Marine Chapter</h3>       
      <div class="row mt" >
          <div class="col-md-12" >
              <div class="content-panel" >
              <form class="form-inline" action="add.php" method="POST">
                <div class="row">
                    <div class="form-group col-lg-5" style='float:initial;width:680px;height:240px'>
                        <div class="form-group col-lg-4">
                            <label for="id">ID:</label> 
                            <input class="form-control" type="text" name="ID" required="required" />
                        </div>
                        <div class="form-group col-lg-4">
                            <label for="name">Name:</label> 
                            <input class="form-control" type="text" name="Name" required="required"/>
                        </div>
                        <div class="form-group col-lg-4">
                            <label for="founding">Founding:</label> 
                            <input class="form-control" type="text" name="Founding" required="required"/>
                        </div>
                        <div class="form-group col-lg-4">
                            <label for="successor_of">Successor Of:</label> 
                            <input class="form-control" type="text" name="Successor_Of" required="required"/>
                        </div>
                        <div class="form-group col-lg-4">
                            <label for="successor_chapters">Successor Chapters:</label> 
                            <input class="form-control" type="text" name="Successor_Chapters" required="required"/>
                        </div> 
                        <div class="form-group col-lg-4">
                            <label for="number">Number:</label> 
                            <input class="form-control" type="text" name="Number" required="required"/>
                        </div> 
                        <div class="form-group col-lg-4">
                            <label for="primarch">Primarch:</label> 
                            <input class="form-control" type="text" name="Primarch" required="required"/>
                        </div> 
                        <div class="form-group col-lg-4">
                            <label for="chapter_master">Chapter Master:</label> 
                            <input class="form-control" type="text" name="Chapter_Master" required="required"/>
                        </div> 
                        <div class="form-group col-lg-4">
                            <label for="homeworld">Homeworld:</label> 
                            <input class="form-control" type="text" name="Homeworld" required="required"/>
                        </div>  
                        <div class="form-group col-lg-4">
                            <label for="allegiance">Allegiance:</label> 
                            <input class="form-control" type="text" name="Allegiance" required="required"/>
                        </div>   
                        <div class="form-group col-lg-4">
                            <label for="colors">Colors:</label> 
                            <input class="form-control" type="text" name="Colors" required="required"/>
                        </div>                                                              
                    </div>                                                        
                </div>  
                <br>                          
                <div class="form-group col-md-1 ">
                    <button onclick="showAddRecordDiv()" type="submit" class="btn btn-default">Create</button>
                </div>                            
              </form>                                                                                              
                <form action="javascript:getLastRecord();" method="GET">
                    <div class="form-group col-md-2">
                        <button type="submit" class="btn btn-default">Show Last Created</button>
                    </div>
                </form>                                        
                <form action="javascript:getAllRecords();" method="GET">

                    <div class="form-group col-lg-1">
                        <button type="submit" class="btn btn-default">Show All</button>
                    </div> 

                </form>
                  <table id="advanced-table" class="table table-striped table-advance table-hover">                   
                      <thead>
                      <tr>
                            <th style="text-align:center" width="50">ID</th>
                            <th style="text-align:center" width="100">Name</th>
                            <th style="text-align:center" >Founding</th>
                            <th style="text-align:center" width="150">Successor Of</th>
                            <th style="text-align:center" width="200" >Successor Chapters</th>
                            <th style="text-align:center" >Number</th>
                            <th style="text-align:center" >Primarch</th>
                            <th style="text-align:center" width="200" >Chapter Master</th>
                            <th style="text-align:center" >Homeworld</th>
                            <th style="text-align:center" >Allegiance</th>
                            <th style="text-align:center" >Colors</th>
                            <th style="text-align:center" width="100" >Input Date</th>
                            <th style="text-align:center" >Delete</th>
                      </tr>
                      </thead>   
                      <tbody>
                      </tbody>                          
                  </table>
                  <div id="alert-div" class="alert alert-danger" hidden="hidden">
                        <strong>RECORD DELETED</strong>                           
                        </div>  
                  <div id="add-record-div" class="alert alert-success" hidden="hidden">
                        <strong>CHAPTER CREATED</strong>    
                  </div>
              </div><!-- /content-panel -->
          </div><!-- /col-md-12 -->
      </div><!-- /row -->
</section><! --/wrapper -->
</section><!-- /MAIN CONTENT -->

我的问题是当我放大或缩小页面时，所有divs＆＃39;位置变化和页面布局制动。以下是一些例子： 页面大小为33％：

页面大小为100％：

页面大小为175％：

我在互联网上搜索，看到我必须设置divs＆＃39;尺寸固定/静态。我做了漂浮和宽度高的东西，但它没有帮助。如果不打破页面布局，我该怎么做？