disable class but not the content on smaller device

i have a affix sidebar which i hide when the page opened from smaller screen, but when i added the main content it hides behind the sidebar so i add margin-left:200px; on the content now it working properly on bigger screen but when i open the page from smaller screen i got really thin content

this is my sidebar

    <div class="main-nav">
<div class="row">
<div class="hidden-xs visible-sm visible-md visible-lg">
    <div class="col-md-2 affix">
        <div class="list-group">
            <a href="javascript:void(0);" class="list-group-item"><i class="fa fa-dollar"> </i> Lorem Ipsum</a>
            <a href="javascript:void(0);" class="list-group-item"><i class="fa fa-users"> </i> Lorem Ipsum</a>
            <a href="javascript:void(0);" class="list-group-item"><i class="fa fa-dashboard"> </i> Lorem Ipsum</a>
            <a href="javascript:void(0);" class="list-group-item"><i class="fa fa-unlock"> </i> Lorem Ipsum</a>
        </div>
    </div>
</div>
</div>

the css

.main-nav {
margin-left: 10px;
margin-right: 10px;

}

and this is part of my main content

pastebin com 7mxAzDTi

the css

.main-content {
margin-left: 220px;
margin-right: 10px;
min-height: 800px;

}