Прежде всего, я знаю, что этот вопрос, вероятно, задавался миллион раз. При этом я впервые положил руку на банку с печеньем HTML / CSS, и я чувствую себя полным идиотом за то, что не смог разобраться со всеми имеющимися ресурсами. Вот что я придумала от бога знает сколько сайтов:
<div class="w3-dropdown-hover">
<button class="w3-button w3-hide-small"><i class="fa fa-user"></i> REGISTER</button>
<div class="w3-dropdown-content w3-bar-block w3-border">
<form autocomplete="off">
<div class="form-group">
<input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Username" value="">
</div>
<div class="form-group">
<input type="email" name="email" id="email" tabindex="2" class="form-control" placeholder="Email Address" value="">
</div>
<div class="form-group">
<input type="password" name="password" id="password" tabindex="3" class="form-control" placeholder="Password">
</div>
<div class="form-group">
<input type="password" name="confirm-password" id="confirm-password" tabindex="4" class="form-control" placeholder="Confirm Password">
</div>
<div class="form-group">
<div class="row">
<div class="col-xs-6 col-xs-offset-3">
<input type="submit" name="register-submit" id="register-submit" tabindex="5" class="form-control btn btn-info" value="Register Now">
</div>
</div>
</div>
<input type="hidden" class="hide" name="token" id="token" value="7c6f19960d63f53fcd05c3e0cbc434c0">
</form>
</div>
</div>
Когда я его запускаю, это выглядит так:
![enter image description here](https://i.stack.imgur.com/zo5QJ.png)
Я хотел бы иметь некоторый буфер вокруг него, как будто я вижу все примеры кодов. Однако по какой-то причине, когда я пытаюсь добавить class = "px-4 py-4" к определению области формы, ничего не происходит. Я уверен, что я делаю что-то глупое и буду признателен за любую помощь в этом. Если мне не хватает какой-либо важной информации, пожалуйста, дайте мне знать, и я буду рад добавить ее. Спасибо.