<style> .formWarning { margin-bottom: 20px; } #totpp { margin-top: 80px; margin-bottom: 50px; display: flex; flex-direction: column; align-items: center; height: 50px; justify-content: space-between; } #submitContainer { display: flex; justify-content: center; } #submit { margin-top: 30px; } #svg_container { margin-top: 100px; align-items: center; } svg { transform: scale(1.5); } </style> {% extends "base.html" %} {% block content %} <div id='svg_container' class='formContainer'> <form action='' method="post" novalidate> {{ form.hidden_tag() }} <p>{{ qr | safe }}</p> <p id="totpp"> {{ form.totp_code.label }}<br> {% for error in form.totp_code.errors %} <span class="formWarning">[{{error}}]</span> {% endfor %} {{ form.totp_code(size=6) }} </p> <p id="submitContainer">{{ form.submit() }}</p> </form> </div> {% endblock %}