如何将html表单并排显示？

<style>
    .form-container {
        width: 100%;
        overflow: hidden;
    }

    .form-container form {
        display: inline-block;
        width: 30%;
        margin-right: 2%;
        float: left;
    }
</style>

<div class="form-container">
    <form>
        <!-- 第一个表单内容 -->
    </form>
    <form>
        <!-- 第二个表单内容 -->
    </form>
    <form>
        <!-- 第三个表单内容 -->
    </form>
</div>