I am relatively new to coding. I am trying to get a skateboard to run back and forth my nav bar. The nav bar differs from the window’s width, so I know I cannot check the window.InnerWidth. If I made the nav bar the width of a window, then sure. I am having trouble figuring out how to have it run the width of the nav bar and back. First – Do I need to style the element in JavaScript, or can it stay in CSS? Second, what do I use to measure the width of an element?

function moveSkateboard() {
    const skateboard = document.querySelector('div');
    let position = 0;
    let direction = 1;
    let speed = 1;

    function move() {
        position += direction * speed;
        skateboard.style.left = position + 'px';
        if (position >= window.innerWidth - skateboard.offsetWidth) {
        direction = -1;
        } else if (position <= 0) {
        direction = 1;
        }
        requestAnimationFrame(move);
    }

    requestAnimationFrame(move);
}

So far, this will work if my nav bar is 100%, but I have a logo with the header as well, so I want to limit it to just the width of the nav bar. Right now, it starts at the nav bar but continues past it before it comes back. It continues as if it was still the size of a window (makes sense).

CSS code

nav {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40%;
    height: 6.125em;
}

Ultimately, I want to use just 40% of the animation width.

Thank you for any help.
Just ask if you would like me to place it in CodePen since it is on my local.