Document.queryselector not working on nested element

Question

I am trying to target a nested 'a' tag in the HTML document but it's not getting recognized. What is wrong? Never had a problem before.

Console log

Uncaught TypeError: link is null

HTML

<div class="container">
    <div class="box">
        <div class="left"></div>
        <div class="right">
           <div class="content">
            <h1>Blue Blood Fashion</h1>
            <hr>
            <p>is a high end prêt line of garments for an individual who is conscientious of his/her social position and status.</p>
            <a href="#">Enter Shop</a>
            </div>
        </div>
    </div>
</div>

JS

const bike = document.querySelector('.container .box .left');
const link = document.querySelector('.container .box .right .content a');

link.addEventListener('mouseenter', () => {
    bike.classList.add('active');
})