Bootstrap Column Issue

I am having problems with bootstrap columns.

The problem is that the indentation col-xs-8

exceeds the width of the parent line and creates a horizontal scrollbar. But if I col-xs-8

remove the padding, it pulls right out to remove padding. For example, when padding is relevant 15px

and I remove it, it col-xs-8

moves to the right by the same amount.

My HTML

<div ng-cloak>
    <div class="row">
        <div ng-style="{'margin-left':marginLeft}" class="col-xs-4">
            <div class="row">
                <div class="col-xs-4">
                    <ul class="nav nav-tabs">
                        <!--tabs-->
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-xs-8">
            <div id="canvasContainer">
                <canvas></canvas>
            </div>
        </div>
    </div>
</div>

      

        
        
        
      

    

I don't want to use overflow-x:hidden

.