Использование «id» для позиционирования элемента с css

Question

Я пытаюсь найти правильный селектор для размещения строк меню.

У меня есть:

<a id="mobile-nav" 
href="#">
<div class="container" 
onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</a> 
<script>
function myFunction(x){
x.classList.toggle
('change');}
</script>

, но использование #mobile-nav не работает и использование .container перемещает lo go вправо и заставляет исчезнуть строки меню.

Поэтому я попытался #mobile-nav a не сработало, затем я попытался #mobile-nav.container не сработало.

У меня есть это css стилизация.

.container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) 
translate(-9px, 6px);
transform: rotate(-45deg) 
translate(-9px, 6px);
}
.change .bar2 {opacity: 0;}
.change .bar3 {
-webkit-transform: rotate(45deg) 
translate(-8px, -8px);
transform: rotate(45deg) 
translate(-8px, -8px);
}