iBird Rose

поставить для родителя display: inline-block и не задавать фиксированную ширину.

все зависит от направленности ресурса.
вот к примеру тостер. ты думаешь на тостере есть хотя бы 1% юзеров которые сидят на ie? (не считая таких которые заходят потестить "а нет ли косяков верстки на тостере")
вот и отталкиваешься от того на кого направлен ресурс.

p.s. что касаемо меня - я сразу обговариваю поддержку версий ie, andriod, ios и т.д. если дизайн такой что придется юзать либо flexbox либо городить большие костыли - сразу сообщаю об этом. что поддержка будет к примеру ie11+

если в двух словах - это нормальное поведение margin.
если хочется так как вы желаете:
1) сделать padding-bottom
2) задать border для родителя https://jsfiddle.net/byancced/
3) задать любое значение overflow для родителя, кроме visible

inline - значит этот css записан в самом html документе в теге < style >

<script type="text/javascript">
    $('a[href*="#"]:not([href="#"])').click(function() {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(20) + ']');
            if (target.length) {
                $('html, body').animate({
                    scrollTop: target.offset().top - 20
                }, 1000);
                return false;
            }
        }
    });
</script>

body {
position: fixed;
width: 100%;
overflow-y: scroll;
}

на load функцию тоже засунь

<script type="text/javascript">
jQuery(document).ready(function () {
    var offset = $('#toc-widget-2').offset();
    var topPadding = 0;
    $(window).scroll(function() {
        fixSide();
    });
});

$(window).on('load' function() {
    var offset = $('#toc-widget-2').offset();
    var topPadding = 0;
    fixSide();
});

function fixSide() {
    if ($(window).scrollTop() > offset.top) {
        $('#toc-widget-2').stop().css({marginTop: $(window).scrollTop() - offset.top + topPadding});
    }
    else {
        $('#toc-widget-2').stop().css({marginTop: 20});
    }
}
</script>

табы
tabs

а в чем проблема? https://jsfiddle.net/odowbj3y/
все стили которые ты задаешь - присутствуют