<style type="text/css"> 

.hside {

  margin-top:0px;

  width: 26px;

  height: 300px;

  border:1px solid;

  font-family: "Myriad Pro", Frutiger, "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif; 

  font-size: 1.4em; 

  background-color: red;

} 

 

.hside li { 

  list-style:none;

} 

 

.hside li a:link, .hside li a:visited { 

   width:-26px;

   height: 25px; 

   line-height: 25px; 

   color: black; 

   text-decoration: none; 

   background-color: #eef2f3; 

 

   text-align:center;

   float:left; 

   overflow:hidden; 

-webkit-transition: all ease .3s;

-o-transition: all ease .3s;

-moz-transition: all ease .3s;

-ms-transition: all ease .3s;

transition: all ease .3s;

   display:block;

} 

 

.hside li a:hover { 

   background-color: #d7dee2; 

   color: #fff; 

} 

 

.hside li a img {margin-top:5px;}

</style> 

 

 

<ul class="hside"> 

<li><a href="#" onclick="javascript:window.open('http://jsfiddle.net','','')" title="제이에스피들 - html 자바 css 종합연습장">jsf</a></li> 

<li><a href="#" onclick="javascript:window.open('<?=$g4[path]?>/page/web/tag','','')" title="태그 연습장">태</a></li> 

<li><a href="#" onclick="javascript:window.open('<?=$g4[path]?>/page/web/url','','')" title="주소 암호화">암</a></li> 

<li><a href="#" onclick="javascript:window.open('<?=$g4[path]?>/page/web/color/index.php','','')" title="색상 코드표">색</a></li>  

<li><a href="#" onclick="javascript:window.open('https://www.google.com/adsense/app?hl=ko#home','','')" title="애드센스">애</a></li> 

</ul> 

 위 소스에서 어디를 수정해야 붉은색 소스 부분의 가로 너비를 26px 정도로 맞출 수 있을까요?

아무리 용써봐도 더 이상 줄어들지가 않네요.