Как сделать так, чтобы движущийся элемент оставался с определенной высотой и шириной независимо от размера?

Question

Я пытаюсь отобразить движущиеся слова в моем заголовке и хочу, чтобы слова оставались в этом определенном div независимо от размера браузера. Я консоль регистрирую ширину и высоту, и, кажется, остается в пределах параметра, но на странице он выходит за эти границы. Я пробовал offSetHeight / Width и innerHeight / innerWidth, но они не работают. Я использую clientHeight / Width, и он работает в консоли, но не работает на странице. Я установил для bounce div высоту: 100vh и ширину 100%. Может ли кто-нибудь указать мне правильное направление?

Here is my code:

const bounceDiv = document.querySelector('.bounce')
for (let i = 0; i < words.length; i++) {
    setInterval(function timer() {
        let width = Math.floor(Math.random() * bounceDiv.clientWidth);
        console.log(width + ":" + "width")
        let height = Math.floor(Math.random() * bounceDiv.clientHeight);
        console.log(height + ":" + "height")
        words[i].style.transform = `translate(${width}px, ${height}px) `;
        words[i].style.transition = '1s ease-in-out'
    }, i * 2000);
}