Как исправить неверное положение элементов?

(курс html/css, задание 39 right block)

Полностью повторил код из урока:

<div class="sidebar">
 <h2>Поиск</h2>
 <form method="post" action="#" id="search_form">
 <input type="search" name="search_field" placeholder="ваш запрос" />
 <input type="submit" class="btn" value="найти" />

.sidebar_container {
 float: right;
 width: 224px;
}

.sidebar {
 float: right;
 width: 222px;
 padding: 5%;
 margin: 0 0 16px 0;
 border: solid 1px #f2f2f2;
 border-radius: 5px;
 background-color: #f9f9f9;

Не могу понять, почему кнопка "Найти" у меня находиться под поисковым окошком, а в примере они в одну линию - кнопка сразу за окошком. Что в коде определяет их расположение ? Либо может не хватает места в контейнере для их правильного положения ? Спасибо! 

(p.s. использую vscode и через go live открывется по умолчанию в firefox)