Como deixar o href=# responsive

Front-end CSS
#1

Olá, estou estudando a apostila-html-css-javascript e no exercício 11.18 coloca-se um “botão” de pause e start, mas ele não é responsive.
No browser maximizado fica certinho, mas quando diminui a tela como ficasse no lugar:

Imagem colada320×774 142 KB

Não queria fazer por media. Tem como deixar vinculado a imagem?

#2

Olá!

Você pode mostrar o trecho do HTML desse header?

Como sugestão, caso esteja utilizando Bootstrap, o componente Navbar é uma alternativa interessante para resolver este problema.

#3

Segue o trecho

` 

	  <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>

Segue o CSS

.pause,
.play {
display: flex;
position: absolute;
float: left;
/margin-left: 1150px;/
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;
}