Bootstrap 4 Положение выпадающего меню

Question

Я использую bootstrap 4. Вот моя ситуация. Я хотел бы сделать заголовок сайта с различными категориями выпадающих.

Вот как это выглядит при обычном просмотре

Просмотр при наведении курсора на нажатие

Вот код для заголовка сайта HTML

<div id="dropdown-categories"class="container-fluid">
            <ul class="list-inline d-flex justify-content-center">
                <li class="list-inline-item dropdown">
                    <a class="categories-item dropdown-toggle" href="#" id="Hardware" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
                    Hardware
                    </a>
                    <div class="dropdown-menu" aria-labelledby="Hardware">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="multi-column-dropdown">
                                    <p class="dropdown-item dropdown-head">Plumbing</p>

                                    <a class="dropdown-item" href="decorer.php">Pipes</a>

                                    <a class="dropdown-item" href="dholwale.php">Hoses<a>

                                    <a class="dropdown-item" href="dholwale.php">Water Taps</a>

                                    <a class="dropdown-item" href="dholwale.php">Shower Heads</a>

                                    <a class="dropdown-item" href="dholwale.php">Drain Cleaners</a>

                                    <a class="dropdown-item" href="dholwale.php">Accessories</a>

                                </div>
                            </div>

                            <div class="col-md-3">
                            <ul class="multi-column-dropdown">
                               <p class="dropdown-item dropdown-head">Power & Hand Tools</p>

                               <a class="dropdown-item" href="decorer.php">Drills</a>

                               <a class="dropdown-item" href="dholwale.php">Measuring Tape</a>

                               <a class="dropdown-item" href="dholwale.php">Screwdrivers</a>

                               <a class="dropdown-item" href="dholwale.php">Hammers</a>

                               <a class="dropdown-item" href="dholwale.php">Spanners</a>

                               <a class="dropdown-item" href="dholwale.php">Ladders</a>

                               <a class="dropdown-item" href="dholwale.php">Trolleys</a>

                               <a class="dropdown-item" href="dholwale.php">Tools</a>

                               <a class="dropdown-item" href="dholwale.php">Saws</a>

                               <a class="dropdown-item" href="dholwale.php">Cutters</a>

                               <a class="dropdown-item" href="dholwale.php">Tool Boxes</a>

                               <a class="dropdown-item" href="dholwale.php">Tape</a>

                               <a class="dropdown-item" href="dholwale.php">Accessories</a>

                            </ul>
                            </div>

                        </div>

                    </div>
                </li>

                <li class="list-inline-item dropdown">
                    <a class="categories-item dropdown-toggle" href="#" id="Electrical" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10 20">
                        Electrical
                    </a>
                    <div class="dropdown-menu" aria-labelledby="Electrical" >
                        <div class="row">
                            <div class="col-md-3">
                                <div class="multi-column-dropdown">
                                    <p class="dropdown-item dropdown-head">Power & Hand Tools</p>

                                    <a class="dropdown-item" href="decorer.php">Drills</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>

                <li class="list-inline-item dropdown">
                    <a class="categories-item dropdown-toggle" href="#" id="Household" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10 20">
                        Household
                    </a>
                    <div class="dropdown-menu" aria-labelledby="Household" >
                        <div class="row">
                            <div class="col-md-3">
                                <div class="multi-column-dropdown">
                                    <p class="dropdown-item dropdown-head">Housekeeping </p>

                                    <a class="dropdown-item" href="decorer.php">Garbage Bag</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>

CSS

/*items dropdown start */
#dropdown-categories{
    background-color: #444;
}

.list-inline-item{
    padding: 15px 10px;
    font-size: 15px;
}

.categories-item{
    color:white;
}

.categories-item:hover{
    text-decoration: none;
    color:white;
} 
 .dropdown-menu {
   margin-top: 0;
   width:1000px;
   height:450px;
 }

 .dropdown-item{
     font-size: 14px;
 }

  .dropdown:hover .dropdown-menu { 
    display: block; 
} 
/*items dropdown end */

Как вы Как видите, позиция выпадающего меню странная. я бы хотел, чтобы все раскрывающееся меню располагалось посередине страницы и соответствовало той же ширине и высоте, как это

Answer 1

Удалить ширину и высоту из класса .dropdown-menu. и избегайте использования фиксированной ширины и высоты