Почему при указании пикселей как в видео уроке часть блока переносится на другую строку?

Если указывать кол-во пикселей как в видео уроке, то блок переносит кнопку (найти) на другую строку

при 224пх

если указать 235пх то отображает нормально, но размеры блока больше(

CSS

.site_content{
    width: 880px;
    overflow: hidden;
    margin: 20px auto 0 auto;
    background-color: white;

}

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

HTML

        <div class="site_content">
            
            <div class="sidebar_container">
                


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