I made a square that moves to the end of the width of its container using set and clearInterval. If I add the width as a number it's stopped but when I add the container.width it's not working:

var container = document.getElementById('container')
var square = document.getElementById('mySquare')

function theAll(sq,con){
var pos = 0;
var moving = setInterval(move,10)      
function move(){
  if(pos == con.width){
        clearInterval(moving)}
  else{
  pos++
  sq.style.left=pos + "px";}
  }}

  theAll(square,container)

#container{
  font-size: 100%;
  font-family: Comic Sans MS;
  background-color: blanchedalmond;
 border-radius: 5px;
 padding: 0; 
  width: 100%;
  height: 60%; 
  display: flex;
  flex-direction: column;    
  }
  #mySquare{
  width: 5%;
  height: 5%;
  background-color: blueviolet;
  position: relative;
  }