проблема с добавлением обьекта на страницу

Не могу добавить несколько обьектов в блок div ,каждый последующий обьект просто заменяет предыдущий и в сухом остатке я имею только один обьект на странице . классы я не использовал ни разу ,developer.mozilla сказал что все отлично и должно работать )). Надеюсь что тут подскажут косяк

let box1 = document.querySelector('.main__catalog_sale');


class BoxSale {
    constructor(src, percent, name, discount, sale, buttonName) {
        this.src = src;
        this.percent = percent;
        this.name = name;
        this.discount = discount;
        this.sale = sale;
        this.buttonName = buttonName;
    }

    render() {
        let box = `<div class="main__catalog_box">
        <div class="main__catalog_discount">${this.percent}</div>
        <img src="${this.src}" alt="product">
        <h1>${this.name}</h1>
        <ul>
            <li>xs</li>
            <li>s</li>
            <li>m</li>
            <li>l</li>
            <li>xl</li>
            <li>xxl</li>
        </ul>
        <div class="main__catalog_color">
            <div class="main__catalog_color-black"></div>
            <div class="main__catalog_color-red"></div>
        </div>
        <div class="main__catalog_box-price">
            <p>${this.discount}</p>
            <p>${this.sale}</p>
        </div>
        <button class="btn">${this.buttonName}</button>
        </div>`;
        box1.innerHTML = box;
    }
}
let cardSale = new BoxSale('./images/gallery/2.jpg', '-53%', 'Портупея "Пеппи"', '4990 p.', '2990 p.', 'заказать');
cardSale.render();

let cardSal = new BoxSale('./images/gallery/2.jpg', '-53%', 'Портупея "Пеппи"', '4990 p.', '2990 p.', 'заказать');
cardSal.render();

ну и сам код css этого блока

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
    transition: .5s;
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    z-index: 2;
    list-style-type: none;
    outline: none;
}
.main__catalog_sale {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}