Como deixar o href=# responsive

<section class="busca">
	    <h2>Busca</h2>

	    <form>
	      <input type="search">
	      <input type="image" src="img/busca.png">
	    </form>
	  </section><!-- fim .busca -->

	  <section class="menu-departamentos">
	    <h2>Departamentos</h2>

	    <nav>
	      <ul>
	        <li>
			  <a href="#">Blusas e Camisas</a>
			  <ul>
			    <li><a href="#">Manga curta</a></li>
			    <li><a href="#">Manga comprida</a></li>
			    <li><a href="#">Camisa social</a></li>
			    <li><a href="#">Camisa casual</a></li>
			  </ul>
			</li>
	        <li><a href="#">Calças</a></li>
	        <li><a href="#">Saias</a></li>
	        <li><a href="#">Vestidos</a></li>
	        <li><a href="#">Sapatos</a></li>
	        <li><a href="#">Bolsas e Carteiras</a></li>
	        <li><a href="#">Acessórios</a></li>
	      </ul>
	    </nav>
	  </section><!-- fim .menu-departamentos -->	  
	</div><!-- fim .container .destaque -->
	
	<section class="banner">
	<a href="#" class="pause"></a>
	<img id="mainImg" src="img/destaque-home.png" alt="Promoção: Big City Night">
	</section>

.pause,

.play {

display: flex;

position: absolute;

float: left;

/<em>margin-left: 1150px;</em>/

margin-left: 80%;

margin-top: 1%;

}

.pause {

border-left: 10px solid #900;

border-right: 10px solid #900;

height: 30px;

width: 5px;

}

.play {

border-left: 25px solid #900;

border-bottom: 15px solid transparent;

border-top: 15px solid transparent;

}