Attach vertical menu to segment using Semantic UI

Question

How is it possible to attach a vertical menu to segment using the Semantic-UI CSS framework? When using the markup presented in the documentation there will be a margin (resulting form the grid padding) between the content and the menu. If not using a grid the borders don't fit.

    <div class="ui grid">
    <div class="row">
        <div class="sixteen wide column">
            <!-- Overlapping border -->
            <div class="ui horizontal segments">
                <div class="ui vertical tabular menu">
                    <a class="active item">Bio</a>
                    <a class="item">Pics</a>
                    <a class="item">Companies</a>
                    <a class="item">Links</a>
                </div>
                <div class="ui segment">
                    This is an stretched grid column. This segment will always match the tab height
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <!-- Margin between the elements -->
        <div class="four wide column">
            <div class="ui vertical fluid tabular menu">
                <a class="active item">Bio</a>
                <a class="item">Pics</a>
                <a class="item">Companies</a>
                <a class="item">Links</a>
            </div>
        </div>
        <div class="twelve wide stretched column">
            <div class="ui segment">
                This is an stretched grid column. This segment will always match the tab height
            </div>
        </div>
    </div>
    <div class="row">
        <!-- Margin between the elements -->
        <div class="four wide column">
            <div class="ui vertical fluid menu">
                <a class="active item">Bio</a>
                <a class="item">Pics</a>
                <a class="item">Companies</a>
                <a class="item">Links</a>
            </div>
        </div>
        <div class="twelve wide stretched column">
            <div class="ui segment">
                This is an stretched grid column. This segment will always match the tab height
            </div>
        </div>
    </div>
    <div class="row">
        <div class="sixteen wide column">
            <!-- Overlapping border -->
            <div class="ui horizontal segments">
                <div class="ui vertical menu">
                    <a class="active item">Bio</a>
                    <a class="item">Pics</a>
                    <a class="item">Companies</a>
                    <a class="item">Links</a>
                </div>
                <div class="ui segment">
                    This is an stretched grid column. This segment will always match the tab height
                </div>
            </div>
        </div>
    </div>
</div>

JSFiddle

I expect that the vertical menu is attached to the segment (like when using horizontal menus).

Answer 1

I think you can make small overriding css class to amend a few things in the default grid ui and menu classes to make what you want. Here is a code sample with just the first grid ui example: http://codepen.io/Nasir_T/pen/dOGGro