Bootstrap 4 проблема с переключателем, когда нажимается, снижает как себя, так и имидж бренда примерно на 5 пикселей

Question

Я использую bootstrap 4. Когда я нажимаю на переключатель, он переключает то, что я хочу, но при этом уменьшается как изображение бренда (это изображение), так и значок переключателя примерно на 5 пикселей. Когда я отключаю его, он возвращается в исходное положение. Я не уверен, что происходит. Когда рушится навигационная панель, все выглядит просто отлично. Только когда я нажимаю на переключатель, все становится не так. Любая помощь приветствуется!

Это навигационная панель css

body {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  color: black;
}

.sign-in {
  background-color: #CF4747;
}


/* MAIN NAVBAR */

#brandIcon {
  width: 190px;
  margin: px;
  margin-top: -10px;
}

#mainNavbar {
  background-color: white;
  padding-left: 75px;
  padding-right: 75px;
  padding-top: 0;
  padding-bottom: 0;
  text-transform: uppercase;
  height: 76px;
  color: black;
}

#mainNavbar li {
  height: 76px;
}

#mainNavbar a {
  color: black;
  align-items: center;
  padding-top: 15px;
}

#mainNavbar .nav-link {
  margin-left: 20px;
  margin-right: 20px;
}

.navbarLinks .nav-item {
  font-size: 11.5px;
  letter-spacing: 1px;
  padding: 1.3em;
  text-decoration: none;
  text-transform: uppercase;
}

.icons-right li {
  padding: 1.1em;
  margin: 0;
}

#bikes {
  border-bottom: 3px solid #F54343;
}

#componenets {
  border-bottom: 3px solid #00CA0F;
}

#apparel {
  border-bottom: 3px solid #EBF54A;
}

#insideCinelli {
  border-bottom: 3px solid black;
}


/* #bikesButton {
        margin-right: 50px;
        margin-left: 200px;
    }

    #insideCinelli {
        margin-left: 50px;
        margin-right: 25px;
    } */

.icons-right {
  display: inline-block;
  padding-top: 15px;
}

@media (max-width: 1250px) {
  #insideCinelli {
    margin-left: 0px;
    margin-right: -25px;
  }
}

@media (max-width: 1250px) {
  #bikesButton {
    margin-left: 50px;
    margin-right: 0px;
  }
}

@media (max-width: 1000px) {
  .icons-right {
    margin-left: -50px;
    margin-right: 0px;
    padding-left: -100px;
  }
}


/* DROPDOWN MENU */

#dropdownMenu {
  background-color: white;
  position: absolute;
  height: 170px;
  box-shadow: 5px 1px 20px #E3E3E3;
  opacity: 0;
  z-index: -1;
}

#centerDiv div {
  display: inline-block;
  padding-right: 15px;
  vertical-align: top;
}

#dropdownMenu h3 {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  margin-bottom: 2px;
}

#dropdownMenu li {
  font-size: 11.4px;
  list-style-type: none;
  font-weight: 300;
  line-height: 25px;
}

#centerDiv {
  border-right: 1px solid #E1E1E1;
  border-left: 1px solid #E1E1E1;
  height: 170px;
  text-align: left;
  padding: 25px;
}

#leftDiv {
  text-align: right;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  padding-top: 23px;
  padding-right: 30px;
}

#rightDiv {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  padding-top: 23px;
  padding-left: 30px;
}

Вот HTML