HTML未正确显示，列嵌套在另一列中

我在文本编辑器中输入的内容在chrome和firefox中都不正确，我已经检查了好几次代码，并且已经有了一个linter

所以我写的代码是

<div class="row">
    <div class="col-md-5 col-md-offset-1">
      <div class= "panel panel-danger" id= "list_down">
        <div class="panel-heading">Your Forms</div>
        <table class= "table table-hover">
          <thead>
          <tr>
            <th>Application</th>
            <th>Month</th>
            <th>Due Date</th>
            <th>Completion</th>
          </tr>
        </thead>
        <tbody>
          <tr href ="google.com">
              <td>Project Manager</td>
              <td>February</td>
              <td>02/1/2013</td>
              <td>Not Completed</td>
            </tr>
          </tbody
        </table> <!-- table -->
      </div> <!-- panel -->
      </div> <!-- column -->
  <div class="col-md-3" id="list_down">
        <h4>Data Analysis</h4>
      </div> <!-- columns 2 -->
  </div> <!-- row 2 -->

所以我的行中应该有2个列，但是web控制台显示的是

<div class="row">
    <div class="col-md-5 col-md-offset-1">
      <div class="panel panel-danger" id="list_down">
        <div class="panel-heading">Your Forms</div>
        <div class="col-md-3" id="list_down">
        <h4>Data Analysis</h4>
      </div><table class="table table-hover">
          <thead>
          <tr>
            <th>Application</th>
            <th>Month</th>
            <th>Due Date</th>
            <th>Completion</th>
          </tr>
        </thead>
        <tbody>
          <tr href="google.com">
              <td>Project Manager</td>
              <td>February</td>
              <td>02/1/2013</td>
              <td>Not Completed</td>
            </tr>
          </tbody> <!-- table -->
       <!-- panel -->
       <!-- column -->
   <!-- columns 2 -->
   <!-- row 2 -->

 <!-- container -->

<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
$( ".clipboard_icon" ).click(function() {
  $( this ).hide();
  $( ".clipboard_icon_active").show();
  $( ".form_notif").show();
  $( ".msg_icon").show();
  $( ".msg_icon_active").hide();
  $( ".msg_notif").hide();

});

$( ".clipboard_icon_active" ).click(function() {
  $( this ).hide();
  $( ".form_notif").hide();
  $( ".clipboard_icon").show();
});

$( ".msg_icon" ).click(function() {
  $( this ).hide();
  $( ".clipboard_icon_active").hide();
  $( ".form_notif").hide();
  $( ".msg_icon_active").show();
  $( ".msg_notif").show();
  $( ".clipboard_icon").show();
});

$( ".msg_icon_active" ).click(function() {
  $( this ).hide();
  $( ".msg_notif").hide();
  $( ".msg_icon").show();
});

$('tr').click(function() {
    if($(this).attr('href') !== undefined)
{
    document.location = $(this).attr('href');
}
});
</script>  </table></div></div></div>

出于某种奇怪的原因，它将柱嵌套在面板内部

标签未关闭您错过了>，我看不到其他问题，或者面板主体：

    <div class="row">
        <div class="col-md-5 col-md-offset-1">
          <div class= "panel panel-danger" id= "list_down">
            <div class="panel-heading">Your Forms</div>
            <div class="panel-body">
               <table class= "table table-hover">
                 <thead>
                   <tr>
                     <th>Application</th>
                     <th>Month</th>
                     <th>Due Date</th>
                     <th>Completion</th>
                   </tr>
                 </thead>
                 <tbody>
                   <tr href ="google.com">
                     <td>Project Manager</td>
                     <td>February</td>
                     <td>02/1/2013</td>
                     <td>Not Completed</td>
                   </tr>
                 </tbody> <!-- HERE! -->
               </table> <!-- table -->
           </div> <!-- panel body -->
          </div> <!-- panel -->
       </div> <!-- column -->
      <div class="col-md-3" id="list_down">
            <h4>Data Analysis</h4>
          </div> <!-- columns 2 -->
      </div> 

---

我看到一个畸形的人在工作，我想我的门楣很烂。非常感谢。