Bootstrap Понимание вложенных строк и столбцов

Question

У меня просто небольшой вопрос для понимания.

Я пытаюсь построить навигацию в HTML с помощью Bootstrap, так как я хочу, чтобы она была отзывчивой. С моим текущим кодом строка под navbar-responsive-10 слишком мала, и я не понимаю, почему строка не такая широкая, как col-md-10 из вышеприведенного элемента:

<div class="col-md-11">
    <nav class="navbar navbar-light bg-light navbar-expand-md row">
        <div class="col-md-2">
            <a href="mindup-hub.html" class="navbar-brand">Navigation</a>
        </div>
        <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbar-responsive-10" aria-controls="navbar-responsive-10" aria-expanded="false" aria-label="">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse col-md-10" id="navbar-responsive-10">
            <div class="row">
                <nav class="col-md-10" itemscope="" itemtype="http://schema.org/SiteNavigationElement">
                    <a href="home.html#skipNavigation4" class="invisible">Navigation überspringen</a>
                    <ul class="level_1 nav">
                        <li class="first nav-item">
                            <a class="nav-link" href="news.html" itemprop="url" title="News"><span itemprop="name">News</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="about.html" itemprop="url" title="About"><span itemprop="name">About</span></a>
                        </li>
                        <li class="last nav-item">
                            <a class="nav-link" href="contact.html" itemprop="url" title="Contact"><span itemprop="name">Contact</span></a>
                        </li>
                    </ul>
                    <a id="skipNavigation4" class="invisible">&nbsp;</a>
                </nav>
                <div class="col-md-2 block">
                    <form action="home.html" method="get">
                        <div class="formbody">
                            <div class="widget widget-text form-group">
                                <label for="ctrl_keywords_9" class="invisible">Suchbegriffe</label>
                                <div class="input-group">
                                    <input type="search" name="keywords" id="ctrl_keywords_9" class="form-control form-control-sm text" value="">
                                    <div class="input-group-append widget widget-submit">
                                        <button type="submit" id="ctrl_submit_9" class="submit btn btn-primary btn-sm">Suchen</button>
                                    </div>
                                </div>
                           </div>
                       </div>
                    </form>
               </div>
           </div>
       </div>
    </nav>
</div>

Редактировать: Как это выглядит [1]: https://i.stack.imgur.com/tZLHL.png Я должен упомянуть, что код только что вырезан, поэтому перед ним есть контейнер и элемент строки.