Html CSS:表单在父div外溢出，没有任何解释

我创建了一个只包含标题（h1）、网格和简单表单的简单页面。标题占据了我期望的空间，网格也是如此，但是表单似乎占据了网格之外的空间，尽管整个代码都在其中。我不明白为什么会发生这种情况，更改属性（如边距、表单标记上的填充）也无济于事。请看视频：

我的代码如下所示：

<h1>{{ content.title }}</h1>
<div class="grid12">
    <form method="POST" action="/catalogue/add">
        {{ form.csrf_token }}
        <div class="row">
            <div class="grid2 field">
                {{ form.asset_name.label }}
            </div>
            <div class="grid4 field">
                {{ form.asset_name }}
            </div>
            <ul class="errors">{% for error in form.asset_name.errors %}<li>{{ error }}</li>{% endfor %}</ul>
        </div>
        ...
        <div class="row">
            <div class="grid2 field">
                {{ form.asset_short_description.label }}
            </div>
            <div class="grid4 field">
                {{ form.asset_short_description }}
            </div>
            <ul class="errors">{% for error in form.asset_short_description.errors %}<li>{{ error }}</li>{% endfor %}</ul>
        </div>
        {{ form.submit }}
    </form>
</div>

{{content.title}
{{form.csrf_token}
{{form.asset_name.label}
{{form.asset_name}
{%for form.asset_name.errors%}
{{error}
{%endfor%}
...
{{form.asset\u short\u description.label}
{{form.asset_short_description}}
{%for form.asset\u short\u description.errors%}
{{error}
{%endfor%}
{{form.submit}

---

有人能解释为什么会发生这种情况，以及解决办法是什么吗？谢谢

尝试设置

最大宽度：到css文件

如果你可以发送CSS，我将在这里编辑，以便我们可以修复它