my moves do not work as expected..

class Game {
    constructor() {
      this.players = this.createPlayers();
      this.board = new Board();
      this.ready = false;
    }
    startGame() {
      console.log('creating the new board object: const board = new Board()');
      this.board.drawHTMLBoard();
      console.log('a board has created\n Drawing HTML tokens...');
      this.activePlayer.activeToken.drawTHMLToken();
      console.log('HTML tokens have been created');
      this.ready = true;
    }

    // createPlayers returns an array of Player {object} instance
    createPlayers() {
      const player1 = new Player('Player 1', 1, '#e15258', true);
      const player2 = new Player('Player 2', 2, '#e59a13');
      return [player1, player2];
    }

    get activePlayer() {
      return this.players.find(player => player.isActive);
    }

    handleKeyDown(event) {
      if (this.ready) {
        switch(event.key) {
          case "ArrowLeft": {
            console.log("Left");
            this.activePlayer.activeToken.moveLeft();
            break;
          }
          case "ArrowRight": {
            console.log("Right");
            this.activePlayer.activeToken.moveRight(this.board.columns);
            break;
          }
          case "ArrowDown": {
            console.log("Down");
            this.activePlayer.activeToken.moveDown();
            break;
          }
        }
      }
    }
}


class Token {
  constructor(index, owner){
    this.owner = owner;
    this.id = `token-${index}-${owner.id}`;
    this.dropped = false;
    this.columnLocation = 0;
  }

  drawTHMLToken() {
    let token = document.createElement('div');
    document.getElementById('game-board-underlay').appendChild(token);
    token.setAttribute('id', this.id);
    token.setAttribute('class', 'token');
    token.style.backgroundColor = this.owner.color;
  }
  get htmlToken () {
    return document.getElementById(this.id);
  }

  get offsetLeft() {
    return this.htmlToken.offsetLeft;
  }

  moveLeft() {
    if ( this.columnLocation > 0 ) {
      this.htmlToken.style.left = this.offsetLeft - 76;
      this.columnLocation -= 1;
    }
  }

  moveRight(columns) {
    if ( this.columnLocation <  columns) {
      this.htmlToken.style.right = this.offsetLeft + 76;
      this.columnLocation += 1;
    }
  }

  moveDown() {

  }
}