Why is the news list falling out of the news block?

Question

HTML

Editing the file: /bitrix/templates/.default/components/bitrix/news/news/bitrix/news.list/.default/template.php

<?if(!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED!==true)die()?>

<?if(!empty($arResult['ITEMS'])) {?>
    <!-- .news -->
    <section class="news">
        <div class="news-list">
            <?foreach($arResult['ITEMS'] as $arItem) {?>
                <article class="news-list-item">
                    <?if(!empty($arItem['PREVIEW_PICTURE'])) {?>
                        <figure class="news-list-item-image">
                            <a href="<?=$arItem['DETAIL_PAGE_URL']?>" title="<?=$arItem['NAME']?>">
                                <img src="<?=$arItem['PREVIEW_PICTURE']['SRC']?>" alt="<?=$arItem['NAME']?>" width="<?=$arItem['PREVIEW_PICTURE']['WIDTH']?>" height="<?=$arItem['PREVIEW_PICTURE']['HEIGHT']?>">
                            </a>
                        </figure>

                    <?}?>
                    <div class="news-list-item-info">
                        <h3 class="news-list-item-title">
                            <a href="<?=$arItem['DETAIL_PAGE_URL']?>">
                                <?=$arItem['NAME']?>
                            </a>
                        </h3>

                        <time class="news-list-item-date"><?=$arItem['DISPLAY_ACTIVE_FROM']?></time>

                        <div class="news-list-item-description"><?=$arItem['PREVIEW_TEXT']?></div>
                    </div>
                </article>
            <?}?>
        </div>
    </section>

    <?if($arParams['DISPLAY_BOTTOM_PAGER']) {?>
        <?=$arResult['NAV_STRING']?>
    <?}?>
<?}?>

Answer 1

Styles to look at. But so, offhand - try to give the whole block with the news overflow: hidden.