<div class="container">
    <ul class="veriler">
        <a href="#"><li>0</li></a>
    </ul>

        <button id="calistir">TEMİZLE</button>

</div>

 ul li {
        list-style: none;
        padding:15px;
      
    }
    ul{
        display: flex;
    }
    a{
        text-decoration: none;
        color:black;
        font-size: 30px;
        background-color: bisque;
        margin: 0 5px;
        color:red;
    }
    .container{
        width: 600px;
        margin:0 auto;
    }

    <script>
        btn = document.querySelector('#calistir'); 
       
        let veriler = document.querySelector('.veriler'); 
        console.log(veriler); 
let dongu = setInterval(() => {

let rand = Math.random(); 
let rand2 = Math.floor(rand*300);     
     //rand bir sayı 
let li = document.createElement('li'); 
let a = document.createElement('a'); 
li.appendChild(document.createTextNode(rand2));
a.setAttribute('href','#'); 
a.appendChild(li); 
veriler.appendChild(a); 



}, 1000);


btn.addEventListener('click',()=>{
    clearInterval(dongu); 
    document.querySelector('.veriler').innerHTML = ''; 
})





    </script>

Yapamadığım şey liste elemanlarının container' dan taşmaması. Liste elemanları sağa doğru uzayıp gidiyor bunu nasıl engelleyebilirim.