CSS-Logo в заголовке исчезает при добавлении поля paading-left

Question

У меня есть изображение логотипа как ссылка на домашнюю страницу в заголовке слева, а также другие ссылки на навигацию справа. Тем не менее, логотип исчезает, когда я добавляю свойство «padding-left» в встроенный CSS атрибута. введите код здесь

Как ни странно, тот же код (с атрибутом padding-left) отлично подходит для заголовков других страниц того же сайта.

Итак, вот, s снимок с момента, когда левая обивка составляет 1%: left-padding is 1%

снимок с момента, когда левая обивка составляет 3%: left-padding is 3%

Если вы посмотрите внимательно, правая граница изображения фиксируется в определенной точке по горизонтали. Поэтому, когда я увеличиваю левое заполнение, изображение сжимается слева и становится меньше.

Я ожидаю, что изображение будет перемещено влево, в целом, без сжатия.

Вот код:

#header { 
 
     width: 100%; 
 
     height: 10%; 
 
     color: white; 
 
     background-color: #0066CC; 
 
     position: fixed; 
 
     top: 0; 
 
     left: 0; 
 
    }

<div id="header"> 
 

 
    <a href="homepage.html"><img id="logo" src="logo.png" alt="HZ Innovations" style = "float: left; width: 5%; height: 100%; padding-left: 10%;"/></a> 
 
    <div id = "headLinks" style="float: right; position: absolute; bottom: 10%; right: 25%; "> 
 
     <a href="about.html" >About Hz</a>&nbsp; &nbsp;&nbsp; &nbsp; 
 
     <a href="technology.html">The Technology</a>&nbsp; &nbsp;&nbsp; &nbsp; 
 
     <a href="contactUs.html" >Contact Us</a> 
 
    </div> 
 
</div>

Answer 1

Ответ здесь, я не знаю, почему она не работает и раньше, но вы всегда должны написать свой HTML правильно!

#header { 
 
    width: 100%; 
 
    height: 10%; 
 
    color: white; 
 
    background-color: #0066CC; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
#logo { 
 
    width: 5%; 
 
    height: 100%;f 
 
    float: left; 
 
    padding-left: 100px; 
 
} 
 

 
#headLinks { 
 
    float: right; 
 
    position: absolute; 
 
    bottom: 10%; 
 
    right: 25%; 
 
} 
 

 
#headLinks > a { 
 
    display: block; 
 
    margin-right: 10px; 
 
    float: left; 
 
}

<div id="header"> 
 
    <a href="homepage.html"> 
 
     <img id="logo" src="logo.png" alt="Logo"/> 
 
    </a> 
 
    <div id = "headLinks"> 
 
     <a href="about.html">About </a> 
 
     <a href="technology.html">The Technology</a> 
 
     <a href="contactUs.html">Contact Us</a> 
 
    </div> 
 
</div>