gnb바 수정을 도와주실 수 있으신가요?

안녕하세요 한 번 더 올려봅니다. 

저기 작은 검은색 박스를 연한 검은색 박스 위에 겹쳐서 올리고 싶습니다. 

연한 박스를 복사해서 만든지라 작은 박스에도 마진이 들어간 것 같아서 그것도 빼고 싶고요. 

그리고 텍스트에 들어간 링크 효과도 빼고 싶어요.

.a {text-decoration: none;}

.a_text {text-decoration: none;}

.a a_text {text-decoration: none;}

다 안빠지네요 왜일까요ㅜ

불필요한 태그가 있을 경우 지적과 수정 부탁드립니다.

제가 아는 것이 없어 문의 드려요 도와주세요ㅜ

html

<nav id="gnb">

  <div class="wrap">

<div class="logo-plus">

<div class="menubar"></div>

<div class="menu_logo">

<a href="#section01">

<img src="img/logo_in_menu.png" alt="로고">

</a>

</div>

</div>

<ul class="icon">

<i class="facebook"><a href="https://www.naver.com/"><img src="img/facebook-black.png"></a></i>

<i class="insta"><a href="https://www.naver.com/"><img src="img/instagram-black.png"></a></i>

<i class="kakaos"><a href="http://www.kakao.com/talk"><img src="img/kakaostory-black.png"></a></i>

<i class="kakaot"><a href="http://www.kakao.com/talk"><img src="img/kakaotalk-black.png"></a></i>

</ul>

<br><br><br>

<ul class="bar">

<li class="About">

<a href="#section01"><div class="colbox01"></div><div class="colbox02"></div></a><br>

<a class="a_text" href="#section01">About us</a>

</li>

<li class="Portfolio">

<a href="#section02"><div class="colbox01"></div><div class="colbox02"></div></a><br>

<a class="a_text" href="#section02">Portfolio</a>

</li>

<li class="Business">

<a href="#section03"><div class="colbox01"></div><div class="colbox02"></div></a><br>

<a class="a_text" href="#section03">Business</a>

</li>

<li class="Contract">

<a href="#section04"><div class="colbox01"></div><div class="colbox02"></div></a><br>

<a class="a_text" href="#section04">Contract us</a>

</li>

</ul>

  </di

css

#gnb{

background-color : rgba(255, 255, 255, 0.5);

width: 100%;

height: 150px;

position: fixed;

z-index: 100;}

.wrap{width:62.5%;

 height:150px;

 padding-top: 1.2em;}

.menubar{

width: 160px;

height: 7px;

background-color: #231815;

margin-bottom: 1em;}

.logo-plus{float:left;}

.icon{width: 140px;

 height: 25px;

 float: right;}

.kakaos, .facebook, .insta{margin-right: 1em;}

.bar{display: inline-block;

float: right;

    }

.colbox01{

width: 127px;

height: 5.5px;

background-color: #231815;

opacity: 0.2;

}

.colbox02{

width: 53px;

height: 5.5px;

background-color: #231815;

}

ul li {text-decoration: none;

float: left;

display: inline-block;

font-size: 14pt;

    position:relative;

}

.a_text{text-decoration: none;}

.About, .Portfolio, .Business{

margin-right: 5.5em;}