Межкнопочное расстояние

    $(document).ready(function() {
        /*
        all__buttons=document.querySelectorAll('.header__button');
        
            [].forEach.call(all__buttons, function(selected__button){
                selected__button.addEventListener('click', function(event){
                    event.target.style.backgroundColor='#5f3ec0';
                    event.target.style.color='#ffffff';
                
                });
            }); 
        */
    
        $('.header__button').click(function(event){
                $('.header__button').removeClass('lilac');
                $(this).addClass('lilac');
                event.target.style.color='#ffffff';
        }
        );

const getItem = `<div class="cardexample">
                            <div class="mobileimage">
                                    <img class="mobiles" src="../img/mobileimage.png">
                            </div>
                            <div class="content__title">
                                Iphone 11, почему такой же как и Pro Max, может быть большим в 3 строки вот так
                            </div>
                            <div class="video__icon">
                                <span>
                                    <button class="crashvideo">Краш видео</button>
                                </span>
                                <span>
                                    <a href="#"><img class="youtube__icon-play" src="../img/Vector.png"></a>
                                </span> 
                                <span>
                                    <button class="crashvideo" id="ex2">Краш видео</button>
                                </span>                         
                            </div>
                            <div class="content__text">
                                Видео разбор с ответами на самые часто задаваемые вопросы может быть большим в 3 строки, видео разбор с ответами на самые часто задаваемые
                            </div>
                            <div class="endlink">
                                <a href="#">Читать далее</a>
                            </div>              
                        </div>
                        `;  



        if  (document.documentElement.clientWidth<640)
        {
            
            const getAllItems = () => {
                let content = '';
                
                for (let i=0; i<4; i++) {
                    content+=getItem;
                }
                return content;
            }       

            const renderAllItems = () => {
                document.getElementById('content').innerHTML=getAllItems();
            }

            renderAllItems();
            console.log('Mobile');
            
        }
        
        
        if ((window.innerWidth>=640) && (window.innerWidth<=1023))
        {
            /*document.getElementsByClassName('content__article').innerHTML = getItem;*/
            /*document.querySelectorAll('.content__article').forEach(i => i.innerHTML = getItem);*/
            let blocks = document.querySelectorAll('.content__article');
            
            for (let block of blocks)
            {
                block.innerHTML=getItem;
                /*document.querySelectorAll('.content__article')[i].innerHTML = getItem;*/
            }
            
            console.log('Tablet');
            
        
        }
        
        if (document.documentElement.clientWidth > 1023)
        {
            console.log('Desktop');
        }
    
    }
    
    
    )

body {
    margin: 0;
    padding: 0;
}

:root {
    --containerfullwidth: 768;
}

.globalcontainer {
    margin-top: 0px;
    margin-right: 4%;
    margin-bottom: 0px;
    margin-left: 4%;
    /*height: 100%;*/
}

.header > .header__text {
position: relative;
width: (calc((93/331.22)*100vw));
height: 24px;
left: 0;
margin-top: 129px;
margin-bottom: 20px;

font-family: TT Norms;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 100%;
/* identical to box height, or 24px */


color: #000000;
}

/*
.header__buttons {
    left: 0;
    top: 193px;
}
*/


.header__button {
    width: 75px;
    height: 30px;
    border-radius: 4px;
    border-color: #5f3ec0;
    background-color: #fff;
    margin-right: (calc((40/331.22)*100vw)) /*1.75%*/;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
}

.header__buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 7px 15px 7px 0px;
    overflow: hidden;
    /*margin-right: 10%;*/
}

.content {
    width: 100%;
}

.content__article {
    display: none;
}

.cardexample {
    width: 100%;
}

.mobileimage img{
    max-width: 100%;
    height: auto;
}

.mobiles {
    max-width: 100%;
}

.content__title {
    font-family: TTNorms-Medium;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 21.6px;
    
    margin: 0.3% 15px 0 15px;
}

.crashvideo {
    width: 115px;
    height: 30px;
    border-radius: 4px;
    margin-top: 15px;
    
    background-color: #5f3ec0;
    color: #ffffff;
}

.video__icon {
    margin-left: 15px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

#ex2 {
    display: none;
}

.youtube__icon-play {
    margin-left: auto;
    margin-right: auto;

    margin-top: 20.5px;
    width: 25px;
    height: 18.75px;
    
    align: center;
}

.content__text {
    margin-top: 16px;
    text-align: left;
    margin-left: 15px;
    margin-right: 90px;
    
    font-family: TT Norms;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 150%;
    /* or 22px */


    /* Main text */

    color: #cacaca;
}

.endlink {
    margin-top: 20px;
    margin-left: 15px;
    margin-bottom: 20px;
    
    font-family: TT Norms;
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 100%;
    color: #121212;
}

a {
    text-decoration: none;
}

.endlink a {
    color: #121212;
}

.endlink a:visited {
    color: #800080;
}

.big__button {
    width: 100%;
}

.show__more {
    width: 345px;
    height: 50px;
    
    display: block;
    text-align: center;
    margin: 30px auto;
    padding: 0px 0px;
    border-radius: 6px;
    
    background-color: #5f3ec0;
    color: #ffffff;
}

.footer {
    margin-top: 0px;
    width: 100%;
    background-color: #303030;
}

.contacts {
    color: #ffffff;
    width: 100%;
    border-bottom: 1px solid rgba(180, 180, 180, 0.2);
    margin-bottom: 0px;
}

.contacts__title {
    padding-top: 25px;
    padding-left: 15px;
    
    font-family: TT Norms;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 100%;
}

.contacts__telephones {
    margin-top: 40px;
    margin-left: 15px;

    font-family: TT Norms;
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 100%;
}

.telephone1 {
    margin-top: 0px;
    margin-bottom: 24px;
}

.telephone2 {
    padding-bottom: 30px;
}

.requestcall {
    margin-left: 15px;
    /*margin-top: 30px;*/
    margin-bottom: 25px;
    width: 165px;
    color: #ffffff;
    border-color: #ffffff;
    background-color: #303030;
    border: 1px solid #FFFFFF;
    box-sizing: border-box; 
    border-radius: 6px;
}

.internetshop {
        padding-top: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 25px 15px;
        border-bottom: 1px solid rgba(180, 180, 180, 0.2);      
}

.internetshop__title {
    /*
    margin-left: 15px;
    margin-top: 25px;
    */
    color: #FFFFFF;
}

.disclosure__arrow {
    transform: rotate(90deg);
    /*
    margin-top: 30.62px;
    margin-right: 18px;
    */
    color: #FFFFFF;
}

.company {
        padding-top: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 25px 15px;
        border-bottom: 1px solid rgba(180, 180, 180, 0.2);      
}

.company__title {
    /*
    margin-left: 15px;
    margin-top: 25px;
    */
    color: #FFFFFF;
}

.help__to__the__buyer {
        /*padding-top: 0;*/
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 25px 15px;
        border-bottom: 1px solid rgba(180, 180, 180, 0.2);      
}

.help__to__the__buyer__title {
    /*
    margin-left: 15px;
    margin-top: 25px;
    */
    color: #FFFFFF;
}

.socialnetworks__links {
        border-bottom: 1px solid rgba(180, 180, 180, 0.2);
}

.socialnetworks__links__title {
    margin-left: 15px;
    margin-top: 25px;
    color: #FFFFFF;
    margin-bottom: 15px;
}

.socialnetworks__links-images {
    display: flex;
    align-items: center;
    justify-content: space-between; 
    margin-left: 15px;
}

.allrights__text {
    padding-top: 25px;
    padding-left: 15px;
    color: #B4B4B4;
    padding-bottom: 25px;
}

.logo__company {
    display: none;
}

.lilac {
    background-color: #5f3ec0;
}

.privacy__policy {
    display: none;
}

.terms__of__use {
    display: none;
}

.about__shop, .delivery__and__payment, .guarantees__and__returns,
.credit__and__installments, .trade__in, .promotions, .catalog,
.service, .news, .reviews
 {
    display: none;
}

.about__us, .company__news, .vacancies, .company__contacts {
    display: none;
}

.help__to__the__buyer__title__for__tablet, .contacts__for__help, .warranty__and__return, .service__for__help, .support {
    display: none;
}

<html>
<head>
<!-- <link rel="stylesheet" href="testsite.css">-->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test Example</title>
<link rel="stylesheet" type="text/css" href="../css/mobile.css" media="screen and (min-width: 320px) and (max-width: 639px)"></link>
<link rel="stylesheet" type="text/css" href="../css/tablet.css" media="screen and (min-width: 640px) and (max-width: 1023px)"></link>
<link rel="stylesheet" type="text/css" href="../css/desktop.css" media="screen and (min-width: 1024px) and (max-width: 1920px)"></link>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>

</head>
<body>
    <div class="container">
        <div class="globalcontainer">
                <div class="header">
                        <div class="header__text">
                            Обзоры
                        </div>
                        <div class="header__buttons">
                            <!-- <span> -->
                                <button class="header__button">Все</button>
                                <button class="header__button">Видео</button>               
                                <button class="header__button">Текст</button>               
                                <button class="header__button">Обзоры</button>
                                <button class="header__button">Сравнения</button>
                                <button class="header__button">Краш видео</button>
                                <button class="header__button">Распаковка</button>
                            <!-- </span> -->
                        </div>
                </div>      
                <div class="content" id="content">
                        <div class="content__article">
                        
                        </div>
                        <div class="content__article">
                        
                        </div>
                        <div class="content__article">
                        
                        </div>
                        <div class="content__article">
                        
                        </div>
                        <div class="content__article">
                        
                        </div>
                        <div class="content__article">
                        
                        </div>
                        <div class="content__article">
                        
                        </div>
                        <div class="content__article">
                        
                        </div>
                </div>              
                </div>              
                <button class="show__more">Показать еще</button>
        <!-- </div> -->
        <div class="footer">
                <div class="threecolumnfooter">
                        <div class="firstfootercolumn">
                                <div class="logo__company">
                                    <img src="../img/lastlogo1.png">
                                </div>
                                <div class="contacts">
                                    <div class="contacts__title">
                                        Контакты
                                    </div>
                                    <div class="contacts__telephones">
                                        <div class="telephone1">
                                        +7 (800) 333 32 24
                                        </div>
                                        <div class="telephone2">
                                        +7 (812) 448 68 11
                                        </div>
                                    </div>
                                    <button class="requestcall">
                                        Заказать звонок
                                    </button>
                                </div>
                                <div class="privacy__policy">
                                    Политика конфиденциальности
                                </div>
                                <div class="terms__of__use">
                                    Пользовательское соглашение
                                </div>
                        </div>
                        <div class="secondfootercolumn">
                                <div class="internetshop">
                                        <div class="internetshop__title">
                                            Интернет магазин
                                        </div>
                                        <div class="disclosure__arrow">
                                            >
                                        </div>
                                        <div class="about__shop">
                                            О магазине
                                        </div>
                                        <div class="delivery__and__payment">
                                            Доставка и оплата
                                        </div>
                                        <div class="guarantees__and__returns">
                                            Гарантии и возврат
                                        </div>
                                        <div class="credit__and__installments">
                                            Кредит и рассрочка
                                        </div>
                                        <div class="trade__in">
                                            Trade-in
                                        </div>
                                        <div class="promotions">
                                            Акции
                                        </div>
                                        <div class="catalog">
                                            Каталог товаров
                                        </div>
                                        <div class="service">
                                            Сервис
                                        </div>
                                        <div class="news">
                                            Новости
                                        </div>
                                        <div class="reviews">
                                            Обзоры
                                        </div>
                                </div>
                        </div>
                        <div class="thirdfootercolumn">
                                <div class="company">
                                        <div class="company__title">
                                            Компания
                                        </div>
                                        <div class="disclosure__arrow">
                                            >
                                        </div>
                                        <div class="about__us">
                                            О нас
                                        </div>
                                        <div class="company__news">
                                            Новости
                                        </div>
                                        <div class="vacancies">
                                            Вакансии
                                        </div>
                                        <div class="company__contacts">
                                            Контакты
                                        </div>
                                </div>
                                <div class="help__to__the__buyer">
                                        <div class="help__to__the__buyer__title">
                                            Помощь покупателю
                                        </div>
                                        <div class="help__to__the__buyer__title__for__tablet">
                                            Помощь
                                        </div>
                                        <div class="disclosure__arrow">
                                            >
                                        </div>
                                        <div class="contacts__for__help">
                                            Контакты
                                        </div>
                                        <div class="warranty__and__return">
                                            Гарантия и возврат
                                        </div>
                                        <div class="service__for__help">
                                            Сервис
                                        </div>
                                        <div class="support">
                                            Поддержка
                                        </div>
                                </div>
                        </div>
                </div>
                <div class="footerend">
                <div class="socialnetworks__links">
                        <div class="socialnetworks__links__title">
                            Мы в соц. сетях
                        </div>
                        <div class="socialnetworks__links-images">
                            <div class="facebook-image">
                                <embed src="../img/facebook.svg">
                            </div>
                        </div>
                </div>
                <div class="allrights">
                        <div class="allrights__text">
                            © 2020 Все права защищены
                        </div>
                </div>
                </div>
        </div>          
    </div>
<script type="text/javascript" src="jsactions.js"></script>
</body>
</html>

body {
    margin: 0;
    padding: 0;
}

:root {
    --containerfullwidth: 768;
}

.globalcontainer {
    margin-top: 0px;
    margin-right: 4%;
    margin-bottom: 0px;
    margin-left: 4%;
    /*height: 100%;*/
}

.header > .header__text {
position: relative;
width: (calc((93/331.22)*100vw));
height: 24px;
left: 0;
margin-top: 129px;
margin-bottom: 20px;

font-family: TT Norms;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 100%;
/* identical to box height, or 24px */


color: #000000;
}

/*
.header__buttons {
    left: 0;
    top: 193px;
}
*/


.header__button {
    width: 75px;
    height: 30px;
    border-radius: 4px;
    border-color: #5f3ec0;
    background-color: #fff;
    margin-right: (calc((40/331.22)*100vw)) /*1.75%*/;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
}

.header__buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 7px 15px 7px 0px;
    overflow: hidden;
    /*margin-right: 10%;*/
}