Почему при hover смещается текст?

Question

[Орхан Гасанлы]

Здравствуйте!
Вопрос довольно простой и уверен, что не раз задавался здесь или на stack...
Как устранить проблему со смещением текста ссылки при :hover?
И почему это сказывается на изображении?
Как равномерно изменить этот текст при этом без смещения?
Ссылка на сайт - test19.md7.info
Скрин проблемной области - https://screenshots.firefox.com/7a2Tw9BCn1vQX1UZ/t...
Заранее спасибо!
Касательно самого кода:

html

<div class="header_image">
	<img src="/wp-content/themes/nyt/images/reporter.svg" alt="Стать колумнистом" height="90">
	<a class="columnist" data-initialtext="Стать колумнистом" href="#">Стать колумнистом</a>
</div>

javascript

// заменяем текст ссылки при наведении
  jQuery('.columnist').hover(
    function() {
        var $this = $(this); // caching $(this)
        $this.data('initialtext', $this.text());
        $this.text("Стать автором сейчас");
    },
    function() {
        var $this = $(this); // caching $(this)
        $this.text($this.data('initialtext'));
    }
  );

CSS

.header_image {
    text-align: center;
    float: right;
}
.header_wrapper img {
    width: 100%;
    height: 40px;
    margin-top: 20px;
}
.columnist {
    font-size: 14px;
    line-height: 1;
    color: #000;
    text-decoration: none;
    margin-top: -10px;
    display: block;
    padding: 5px;
}
.columnist:hover {
    background: rgba(0,0,0,0.8);
    color: #fff;
}

Answer 1

[display: block]

Задать width для ссылки, например, 150px.

Comments

[Орхан Гасанлы]

Благодарю. Действительно помогло)