Javascript 样式与我的HTML代码相矛盾

我已经通过HTML和CSS创建了一个旅行页面，我还添加了按钮，在同一页面中添加了另一个旅行，但在点击按钮5次以上后，表单就脱离了区域。这似乎是来自风格的问题，但我无法找出相同的

再加一次旅行

您的css中有以下内容：

.form-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -5px;
  margin-left: -5px;
}

此处

marginleft:-5px

使内容在每次创建元素时向左移动，然后将

marginleft:-5px'更改为
marginleft:0px`

更改Css后，您的Css将如下所示

.form-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -5px;
  margin-left: 0px;
}

单击“添加另一个行程”时添加新表单部分的方式似乎是错误的。用于插入新表单节的
元素位于先前的
中。你不应该把它放在那里，而应该放在它的后面。试着用这个例子来理解

这就是你现在拥有的

<div class="form-row"></div>
<div class="form-row"></div>
<div class="form-row">
   <div class="form-new" id="space"></div>
</div>



试着这样做

<div class="form-row"></div>
<div class="form-row"></div>
<div class="form-row"></div>
<div class="form-new" id="space"></div>

检查您的jsiddle并发现问题。
您必须在css中添加以下类

form .form-row{margin-left: 0;}

在这里发布一个相关问题的最小示例，而不是在200行HTML和9000行CSS的异地。这里的问题我认为是你把引导对齐搞砸了。类
行
既有
左边距
又有
右边距
的
-15px
和
列*
（应该是
行
的直接子行）都有
左侧填充
和
右侧填充
的
-15px
，因此如果您继续添加
列*/code>/code>和无
行
（或注意填充和边距）这些
列-*
的内容不会正确对齐。这就是我在您的示例中只看到一行
后所说的。祝您好运。