앵커 태그가 800 픽셀 확장되는 이유는 무엇입니까?

Question

해당 웹 사이트가 작동되고 있습니다. www.omegadesignla.com

위쪽 막대의 로고에있는 내 앵커 태그가 800 픽셀을 확장하는 이유를 알아보십시오. 로고의 폭을 클릭 할 수 없도록하려면 로고 자체의 클릭 가능 영역을 어떻게 줄일 수 있습니까? 고마워요, 고마워요.

<nav class="top-bar" data-topbar> 
     <ul class="title-area"> 
     <li class="name"> 

      <h1><a href="#"><img class="logo" src="img/omegalogogood.png"></a></h1> 
     </li> 
     <li class="toggle-topbar menu-icon"> 
      <a href="#">Menu</a> 
     </li> 
     </ul> 

     <section class="top-bar-section"> 

     <ul class="right"> 
      <li><a href="#pricing">About us</a></li> 
      <li><a href="#">Contact us</a></li> 

      <li class="has-dropdown"> 
       <a href="#">Services</a> 
       <ul class="dropdown"> 
       <li><a href="#">Web Development</a></li> 
       <li><a href="#">Print Media</a></li> 
       <!-- <li class="active"><a href="#">Active link in dropdown</a></li> --> 
       </ul> 
      </li> 
     </ul> 
     </section> 
    </nav>  

CSS : 그것은 블록 레벨 H1 요소에 있기 때문에

.top-bar { 
overflow: visible; 
/*height: 3.75rem;*/ 
line-height: 2.813rem; 
position: relative; 
background: #333333; 
margin-bottom: 0; 
} 



.logo{ 
    width: 15%; 
} 

Answer 1

앵커가 800 픽셀로 확대 시도하는 사용 가능한 모든 공간을 채우기 위해 확장됩니다. 당신이 사용중인 HTML 구조가 의미없는

.top-bar h1 { 
    width: 15%; /* or 20% or whatever */ 
} 

.logo{ 
/* width: 15%; */ 
} 

: 당신이 그것을 원하는 경우 회원님이 아니라 .logo에보다는 H1의 폭을 설정하고 .logo에서 폭을 제거 할 수 있습니다, 800 픽셀이어야합니다 그러나, h1 엘리먼트는 제목이나 최상위 텍스트로 사용된다. div 또는 span에 로고를 넣지 않는 이유는 무엇입니까?

Answer 2

이

.top-bar .name h1 a { 
    width: auto; 
    height: 100%; 
} 

및

.logo { 
    /* width: 20%; comment out width in logo class*/ 
    height: 100%; 
}