Position:relative in bootstrap grid?

Question

css

When creating a circular menu, I ran into the problem that the container for the menu with the property position: relative; when the screen is reduced, it goes beyond the boundaries of the area intended for it (all this is in the bootstrap3 grid system). there are three columns, the menu is located in the middle and when the screen is reduced, the central block with the menu simply runs over the right column. Please tell me how to prevent this?
the width and height are given in vmin as it is required to keep the proportions of the square.
code example: codepen.io/Fess/pen/adOgRN

Answer 1

More or less like this:

<div class="row">
                <div class="col-sm-12 col-md-12 style="padding:0">
                    <nav class="circle-menu">
                        <div class="center"></div>
                        <ul>
                            <li><a href="#"></a></li>
                            <li><a href="#"></a></li>
                            <li><a href="#"></a></li>
                            <li><a href="#"></a></li>
                            <li><a href="#"></a></li>
                            <li><a href="#"></a></li>
                        </ul>
                    </nav>
                </div> 
            </div>

"Cross-over" is due to the col-sm-1 and padding-a blocks of the block into which the nav was pushed