Bootstrap строка портится

Question

HTML

  <div class="container">
    <div class="jumbotron">
    <div class="row">
    <div class="col-2"></div>
    <div class="col-2 Jumbooptions" id="create" onclick="location.href='#';">
            <p class="efr">Create</p>
            <i class="fas fa-plus fa-2x" id="ci"></i>
        </div>
    <div class="col-2 Jumbooptions" id="add" onclick="location.href='#';">
            <p class="efr">Add</p>
            <i class="fas fa-address-book fa-2x" id="ai"></i>
        </div>
    <div class="col-2 Jumbooptions" id="stats" onclick="location.href='#';">
            <p class="efr">Statistics</p>
            <i class="fas fa-chart-pie fa-2x" id="si"></i>
        </div>
    <div class="col-2 Jumbooptions" id="export" onclick="location.href='#';">
            <p class="efr">Export</p>
            <i class="fas fa-file-export fa-2x" id="ei"></i>
        </div>
        </div>
        <div class="row" id="bigger">
        <div class="col-2" id=""></div>
        <div id="created" class="dropdown col-4">
            <h2>CREATE</h2> 
            <p>as many sheets as you want with ease!</p>
        </div>
        <div id="addd" class="dropdown col-4">

        </div>
        <div id="statsd" class="dropdown col-4">

        </div>
        <div id="exportd" class="dropdown col-4">

        </div>
        </div>
        </div>
        </div>

CSS

            height:70px !important; 
            width:700px;
            margin-left:47px
        }

Если я сделаю «высоту» больше 70, остальная часть ряда перейдет к началу jumbotron

Когда высота меньше 70: https://gyazo.com/6601be928cb893b5355c78fbc792e694

Когда высота больше 70 (200): https://gyazo.com/6b6f96fa6eadcffc6db3dd427cac8d03

Я действительно не уверен, что делать.