Navbar bootstrap

Добрый день!
Начал путь становления джуном. Делаю некий интернет магазин. Обратите внимание на прикреплённую пикчу. Это кусок страницы который содержит навбар. Суть в том, что весь контент лежит под навбаром, только кнопки расположились над ним.
Я не понимаю кто в этом виноват, навбар или кнопки и как это исправить? Кнопки лежат в div который обёрнут в div с пикчей, пикча под навбаром, а кнопка — над. Я почти все компоненты не пишу сам, а адаптирую чужие под свои нужды и из-за этого упускаю ошибку. Мне кажется что всё дело в class`ах, возможно они как-то конфликтуют и движок не понимает что ему рисовать.




кусок вёрстки содержащий кнопки

<template>
    <v-layout class="product_holder">
        <div>
            <v-text-field clearable type="text"
                          v-model="search" label="Поиск"
                          prepend-icon="mdi-magnify">
            </v-text-field>
        </div>
        <div v-for="product in getFilteredProductList" class="product">
            <div class="product_img_holder"><img class="product_img" :src="product.img" alt="iphone 10"/></div>
            <div class="product_info">
                <span>{{product.title}}</span>
                <span>{{product.price}}</span>
                <span>{{product.description}}</span>
            </div>
            <div class="btn_holder">
                <v-btn style="background-color: rgba(126,7,113,0.66)" class="button is-success" @click="addToCart(product)">
                    <v-icon dark left>
                        {{'mdi-basket-fill'}}
                    </v-icon>
                    купить
                </v-btn>
                <v-btn style="background-color: rgba(7,2,126,0.66)" @click="goToAboutPage">
                    описание
                </v-btn>
            </div>
        </div>
    </v-layout>
</template>

кусок вёрстки содержащий навбар

<template>
    <nav class="navbar navbar-expand-lg">

        <div class="collapse navbar-collapse">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <nuxt-link no-prefetch exact active-class="active" class="nav-link" to="/">
                        Home
                    </nuxt-link>
                </li>
                <li class="nav-item">
                    <nuxt-link active-class="active" class="nav-link" to="/About">
                        About
                    </nuxt-link>
                </li>
                <li class="nav-item">
                    <nuxt-link active-class="active" class="nav-link" to="/Catalog">
                        Catalog
                    </nuxt-link>
                </li>
                <li class="nav-item">
                    <nuxt-link active-class="active" class="nav-link" to="/users">
                        Users
                    </nuxt-link>
                </li>
                <li class="nav-item" v-if="!hasToken">
                    <nuxt-link active-class="active" class="nav-link" to="/Login">
                        Login
                    </nuxt-link>
                </li>
                <li class="nav-item" v-else>
                    <a @click.prevent="logout" class="nav-link" href="#">
                        Logout
                    </a>
                </li>
                <li class="nav-item" style="padding-left: 30%">
                    <v-text-field clearable dark type="text"
                                  v-model="search" label="Поиск"
                                  prepend-icon="mdi-magnify">
                    </v-text-field>
                </li>
            </ul>
        </div>
    </nav>
</template>