Making dropdown selection to fill element without gaps - html

Question

I use menu that was created by other developer in our company. I add to the first item of the menu dropdown selection, but the problem that the dropdown box not fully fill the all the item and I can't make it fill.
Here is HTML:
<div class="main-container-top-menu scroll1" id="main-container-top-menu">
<div class="top-menu-item-container-empty">
<div style="width: 50px"></div>
</div>
<div class="top-menu-item-container">
<div class="inactive-border-bottom">
<p class="control has-icons-left is-expanded">
<span class="select is-fullwidth ">
<select class="full-height">
<option>dropdown</option>
<option>options 1</option>
</select>
</span>
<span class="icon is-small is-left"><i class="far fa-building"></i></span>
</p>
</div>
</div>
<div class="top-menu-item-container" >
<div>
<div class="top-menu-item">2. Lot and Model</div>
</div>
</div>
<div class="top-menu-item-container" >
<div [className]="ishpExpanded?'active-border-bottom':'inactive-border-bottom'">
<div class="top-menu-item">3. Home Plan</div>
</div>
</div>
<div class="top-menu-item-container">
<div [className]="isupgExpanded?'active-border-bottom':'inactive-border-bottom'">
<div class="top-menu-item">4. Upgrades</div>
</div>
</div>
<div class="top-menu-item-container">
<div [className]="isnextExpanded?'active-border-bottom':'inactive-border-bottom'">
<div class="top-menu-item">5. Next Steps</div>
</div>
</div>
<div class="top-menu-icon-container">
<i class="fas fa-print top-menu-icon"></i>
<i class="fas fa-share-alt top-menu-icon"></i>
</div>
</div>
And here is CSS:
.scroll1::-webkit-scrollbar {
width: 0px;
height: 3px;
}
.scroll1::-webkit-scrollbar-track {
background: #eff0f0;
}
.scroll1::-webkit-scrollbar-thumb {
background: #666;
}
.main-container-top-menu {
scrollbar-width: auto;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.top-menu-item-container-empty {
border-bottom: 2px solid #eff0f0;
font-family: "Roboto", sans-serif;
border-right: 2px solid #eff0f0;
box-sizing: border-box;
color: #626262;
font-size: 14px;
font-weight: 350;
user-select: none;
justify-content: space-between;
}
.top-menu-item-container {
border-bottom: 2px solid #eff0f0;
font-family: "Roboto", sans-serif;
border-right: 2px solid #eff0f0;
box-sizing: border-box;
color: #626262;
font-size: 14px;
font-weight: 350;
user-select: none;
flex: 1;
justify-content: space-between;
}
.active-border-bottom {
align-items: center;
display: flex;
padding-left: 20px;
padding-right: 20px;
height: 100%;
border-bottom: 3px solid #eb2028;
box-sizing: border-box;
}
.inactive-border-bottom {
align-items: center;
display: flex;
padding-left: 20px;
padding-right: 20px;
height: 100%;
}
.top-menu-item-active {
cursor: pointer;
font-family: "Roboto", sans-serif;
padding: 5px;
font-family: "Roboto", sans-serif;
box-sizing: border-box;
color: #1d1d1d;
font-size: 14px;
font-weight: 350;
user-select: none;
align-items: center;
justify-content: center;
display: flex;
stroke-width: 0.6px;
-webkit-text-stroke-width: 0.6px;
flex: 1;
}
.top-menu-item {
cursor: pointer;
padding: 10px;
font-family: "Roboto", sans-serif;
box-sizing: border-box;
color: #626262;
font-size: 14px;
user-select: none;
align-items: center;
justify-content: center;
display: flex;
flex: 1;
}
.top-menu-item-first {
cursor: default;
border-right: 2px solid #eff0f0;
font-size: 14px;
padding-right: 20px;
font-weight: 800;
border-bottom: 2px solid #eff0f0;
border-left: none;
text-align: left;
justify-content: left;
flex: 1;
}
.top-right-menu-item {
/* margin-right: 50px; */
border-bottom: 2px solid #eff0f0;
height: 100%;
display: inline-flex;
justify-content: flex-end;
align-items: center;
}
.top-item-logo {
height: 55px;
z-index: 100;
width: 55px;
object-fit: contain;
}
.top-menu-icon-container{
display: flex;
align-items: center;
justify-content: center;
}
.top-menu-icon {
cursor: pointer;
margin-right: 25px;
margin-left: 25px;
cursor: pointer;
width: 14px;
padding-top: 25px;
padding-bottom: 25px;
}
.left-arrow,
.right-arrow {
display: none;
}
#media screen and (max-width: 768px) {
.constructor-top-container {
justify-content: center;
padding-left: 3%;
}
}
#media screen and (max-width: 1088px) {
.top-right-menu-item {
padding-left: 10px;
margin-right: 0px;
border-bottom: 2px solid #eff0f0;
flex: 1;
height: 100%;
display: inline-flex;
justify-content: flex-end;
align-items: center;
}
.main-container-top-menu {
padding-left: 0;
padding-right: 0;
padding-bottom: 3px;
}
}
#media screen and (max-width: 414px) {
.top-menu-icon {
margin-right: 15px;
cursor: pointer;
width: 14px;
padding-top: 12px;
}
.scroll1::-webkit-scrollbar {
width: 0px;
height: 0px;
}
.scroll1::-webkit-scrollbar-track {
background: #eff0f0;
}
.scroll1::-webkit-scrollbar-thumb {
background: #666;
}
.top-menu-item-first {
padding-left: 35px;
}
.main-container-top-menu {
transition: 0.2s all;
min-height: 62px;
}
.top-item-logo {
position: absolute;
top: 0;
right: 0px;
margin: 0;
padding: 0;
z-index: 100;
height: 62px;
width: 62px;
object-fit: contain;
}
.left-arrow {
height: 60px;
padding-left: 5px;
padding-right: 5px;
background: white;
display: flex;
align-items: center;
position: absolute;
cursor: pointer;
color: #d1d1d1;
top: 0px;
font-size: 1.6rem;
left: 0;
z-index: 5;
padding-left: 7px;
}
.right-arrow {
height: 60px;
padding-left: 5px;
padding-right: 5px;
background: white;
display: flex;
align-items: center;
position: absolute;
cursor: pointer;
color: #b1b1b1;
font-size: 1.6rem;
left: calc(100% - 88px);
}
}
#media screen and (max-width: 1088px) {
.main-container-top-menu {
overflow-x: auto;
overflow-y: hidden;
/* display: block; */
width: 100%;
white-space: nowrap !important;
}
}
#media screen and (max-width: 414px) {
.main-container {
padding-left: 0px;
padding-right: 0px;
}
}
.no-suite-title {
text-transform: uppercase;
font-size: 1.3em;
font-weight: 300;
position: absolute;
left: 10%;
top: 50%;
z-index: 1000;
}
Workink jsFiddle!
How can I make dropdown to fill the menuc without gaps?
Update
Text moved to the left:

Answer 1

To get the desired result, you need to do the following:
Remove padding-left: 20px and padding-right: 20px from the .inactive-border-bottom selector;
Add height: 100% to these selectors - .control and .select.is-fullwidth.
Need to register .full-height in your css, and write the rule height: 100%!important in it. !important is necessary because this rule overrides the height: 2.5em rule in the .select select.