Список меню слегка движется вправо при наведении

Question

У меня есть меню с логотипом компании слева и списком меню справа.

1) При наведении курсора на меню «Свяжитесь с нами» возникает проблема.При наведении курсора немного смещается вправо.

2) Как отобразить список меню в центре логотипа?

Я также делюсь ссылкойhttps://jsfiddle.net/Narendra2015/jmscoftq/

Не могли бы вы помочь мне с этим вопросом?

#header_menu {
  background-color: #fff;
  /*position: fixed;top: 0;*/
  width: 100%;
  z-index: 900
}

#header_menu .main_header_menu {
  padding: 15px 50px;
}

#header_menu .main_header_menu .t_left_side_menu .t_header_logo {
  width: 200px;
}

#header_menu .main_header_menu .t_left_side_menu .t_header_logo img {
  width: 100%;
}

#header_menu .t_right_side_menu {
  vertical-align: middle;
  line-height: 60px;
}

#header_menu .t_right_side_menu ul {
  list-style: none;
}

#header_menu .t_right_side_menu ul.t_menu_list li {
  display: inline-block;
}

#header_menu .t_right_side_menu ul.t_menu_list li a {
  padding: 12px 30px;
  font-size: 18px;
  text-transform: uppercase;
  color: #343534
}

#header_menu .t_right_side_menu ul.t_menu_list li a:hover {
  color: #00a2ff;
  transition: 0.1s;
}

#header_menu .t_right_side_menu ul.t_menu_list li a.btn_bg {
  color: #000;
}

#header_menu .t_right_side_menu ul.t_menu_list li:last-child a {
  text-transform: capitalize;
}

#header_menu .t_right_side_menu ul.t_menu_list li:last-child a:hover {
  border: 1px solid red;
  background-color: #fff;
  color: red;
  transition: 0.3s;
  box-sizing: border-box;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<header id="header_menu">
  <div class="main_header_menu clearfix">
    <div class="t_left_side_menu pull-left">
      <div class="t_header_logo"><img src="http://1000logos.net/wp-content/uploads/2016/11/google-plus-logo.jpg" alt=""></div>
    </div>
    <!--i_left_side-->

    <div class="t_right_side_menu pull-right">
      <div class="t_right_main_menu">
        <ul class="t_menu_list">
          <li><a href="">Hoem</a></li>
          <li><a href="">About</a></li>
          <li><a href="">Service</a></li>
          <li><a href="" class="contact_link btn_bg">Contact Us</a></li>
        </ul>
      </div>
    </div>
    <!--right_side-->
  </div>
</header>

Answer 1

-> разрешить кнопку при наведении курсора и центр меню логотипа, установите следующий код в существующий код.

#header_menu {
  background-color: #fff;
  width: 100%;
  z-index: 900
}
#header_menu .main_header_menu {
  padding: 15px 50px;
  display: flex;
  align-items: center;
}
#header_menu .main_header_menu .t_left_side_menu .t_header_logo {
  width: 200px;
}
#header_menu .main_header_menu .t_left_side_menu .t_header_logo img {
  width: 100%;
}
#header_menu .t_right_side_menu {
  flex-grow: 1;
  text-align: right;
}
#header_menu .t_right_side_menu ul {
  list-style: none;
  margin: 0;
}
#header_menu .t_right_side_menu ul.t_menu_list li {
  display: inline-block;
}
#header_menu .t_right_side_menu ul.t_menu_list li a {
  padding: 12px 30px;
  font-size: 18px;
  text-transform: uppercase;
  color: #343534
}
#header_menu .t_right_side_menu ul.t_menu_list li a:hover {
  color: #00a2ff;
  transition: 0.1s;
}
#header_menu .t_right_side_menu ul.t_menu_list li a.btn_bg {
  color: #000;
}
#header_menu .t_right_side_menu ul.t_menu_list li:last-child a {
  text-transform: capitalize;
  border: 1px solid transparent;
}
#header_menu .t_right_side_menu ul.t_menu_list li:last-child a:hover {
  border-color: red;
  background-color: #fff;
  color: red;
  transition: 0.3s;
  box-sizing: border-box;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<header id="header_menu">
  <div class="main_header_menu clearfix">
    <div class="t_left_side_menu">
      <div class="t_header_logo"><img src="http://1000logos.net/wp-content/uploads/2016/11/google-plus-logo.jpg" alt=""></div>
    </div>
    <!--i_left_side-->
    <div class="t_right_side_menu text-right">
      <div class="t_right_main_menu">
        <ul class="t_menu_list">
          <li><a href="">Hoem</a></li>
          <li><a href="">About</a></li>
          <li><a href="">Service</a></li>
          <li><a href="" class="contact_link btn_bg">Contact Us</a></li>
        </ul>
      </div>
    </div>
    <!--right_side-->
  </div>
</header>

Answer 2

Добавить прозрачную рамку для Anchor.

Просто добавьте:

border:1px solid transparent;

к вашей декларации css:

#header_menu .t_right_side_menu ul.t_menu_list li:last-child a{text-transform: capitalize;border:1px solid transparent;}

Answer 3

1) Для предотвращения «перемещения» установите границу на a с transparent color

2) Вы используете vertical-align:middle;, что означает, что вы должны использовать display:inline block

, поэтому удалите классы pull-right и pull-left и установите display:inline block до .t_right_side_menu и .t_left_side_menu

Смотрите здесь: https://jsfiddle.net/jmscoftq/10/

#header_menu {
  background-color: #fff;
  /*position: fixed;top: 0;*/
  width: 100%;
  z-index: 900
}

#header_menu .main_header_menu {
  padding: 15px 50px;
}

#header_menu .main_header_menu .t_left_side_menu .t_header_logo {
  width: 200px;
}

#header_menu .main_header_menu .t_left_side_menu .t_header_logo img {
  width: 100%;
}
.t_left_side_menu{display: inline-block;}
#header_menu .t_right_side_menu {
  vertical-align: middle;
  line-height: 60px;
 display: inline-block;
}

#header_menu .t_right_side_menu ul {
  list-style: none;
}

#header_menu .t_right_side_menu ul.t_menu_list li {
  display: inline-block;
}

#header_menu .t_right_side_menu ul.t_menu_list li a {
  padding: 12px 30px;
  font-size: 18px;
  text-transform: uppercase;
  color: #343534
}

#header_menu .t_right_side_menu ul.t_menu_list li a:hover {
  color: #00a2ff;
  transition: 0.1s;
}

#header_menu .t_right_side_menu ul.t_menu_list li a.btn_bg {
  color: #000;
}

#header_menu .t_right_side_menu ul.t_menu_list li:last-child a {
  text-transform: capitalize;
  border: 1px solid transparent;
}

#header_menu .t_right_side_menu ul.t_menu_list li:last-child a:hover {
  border: 1px solid red;
  background-color: #fff;
  color: red;
  transition: 0.3s;
  box-sizing: border-box;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<header id="header_menu">
  <div class="main_header_menu clearfix">
    <div class="t_left_side_menu">
      <div class="t_header_logo"><img src="http://1000logos.net/wp-content/uploads/2016/11/google-plus-logo.jpg" alt=""></div>
    </div>
    <!--i_left_side-->

    <div class="t_right_side_menu">
      <div class="t_right_main_menu">
        <ul class="t_menu_list">
          <li><a href="">Hoem</a></li>
          <li><a href="">About</a></li>
          <li><a href="">Service</a></li>
          <li><a href="" class="contact_link btn_bg">Contact Us</a></li>
        </ul>
      </div>
    </div>
    <!--right_side-->
  </div>
</header>