segment overflow the container in semantic ui?

Question

I began learning Semantic ui lately.

The issue is that I didn't know why the "segment" width overflow the "container".

the => jsfiddle to be more clear.

any more alternative solutions?

Besides the grid system, i'm struggling with padding too (without touching the custom cc)

Thank you for your any advices.

<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

The segment will overflow from the container because semantic grids use negative margins. There's a margin of -1rem on all sides of the grid to make sure that the flex grid sits properly with the outsides of the container.since there's a gutter on the sides of the grid columns. Use a padded grid variation to make this work properly. https://semantic-ui.com/collections/grid.html#negative-margins