сегмент переполняет контейнер в семантическом интерфейсе?

Question

В последнее время я начал изучать Semantic ui.

Проблема в том, что я не знал, почему ширина "сегмента" превышает "контейнер".

=> jsfiddle, чтобы быть более понятным.

есть еще альтернативные решения?

Помимо грид-системы, я тоже борюсь с отступами (не касаясь пользовательской копии)

Спасибо за любые советы.

<div class="ui container">
    <header>
        <h1 class="ui huge header">Your Logo
            <span class="ui sub header">Using Single layout to create several looks</span>

        </h1>

    </header>

    <div class="ui inverted brown segment">
        <div class="ui inverted secondary  menu">
            <a class="ui brown big button">
                Home
            </a>

            <a class="ui brown big button">
                Messages
            </a>
            <a class="ui brown big button">
                Friends
            </a>
        </div>
    </div>


    <div class="ui grid">
        <div class="row">
            <div class="ui inverted  green placeholder segment column">

            </div>
        </div>

    </div>




</div>

Answer 1

Сегмент будет переполнен из контейнера, потому что семантические сетки используют отрицательные поля.На всех сторонах сетки имеется поле -1rem, чтобы убедиться, что гибкая сетка правильно расположена с внешней стороны контейнера. Так как по бокам столбцов сетки имеется желоб.Используйте вариант padded grid, чтобы сделать это правильно.https://semantic -ui.com / коллекции / grid.html # минус-поля