Bootstrap columns are overlapping when the browser window is resized - css

Question

I'm new to Bootstrap and having some styling issues with a project I'm working on. When my window is resized and made smaller, my columns start to overlap. How do I fix this and make it so the text (in this case the messages) are always aligned to the left side of the column?
What am I doing wrong here?
I've made an example page here:
https://www.bootply.com/JxB5m6qw8Z
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Chat</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav"></ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
User2 <span class="caret"></span>
<ul class="dropdown-menu">
<li>Settings</li>
<li role="separator" class="divider"></li>
<li><a rel="nofollow" data-method="delete" href="/users/sign_out">Logout</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="fluid-container" style="margin-top: 70px">
<div class="row">
<div class="col-sm-2 sidebar-main">
<div class="sidebar-items">
<div class="sidebar-channels">
<h4>Channels</h4>
<ul>
<div class="sidebar-listitem">
<li># <a data-behavior="chatroom-link" data-chatroom-id="25" href="/chatrooms/25">General</a></li>
</div>
</ul>
</div>
<div class="sidebar-users">
<h4>Current Users</h4>
<ul>
<div class="sidebar-listitem">
<li><a data-behavior="chatroom-link" data-chatroom-id="28" href="/direct_messages/6">User1</a></li>
</div>
<div class="sidebar-listitem">
<li><a data-behavior="chatroom-link" href="/direct_messages/7">User3</a></li>
</div>
</ul>
</div>
</div>
</div>
<div class="col-sm-10 col-sm-offset-2 body-main">
<div class="room-name">
<h2>General</h2>
</div>
<div class="message-window">
<div data-behavior='messages' data-chatroom-id='25' class="messages">
<div><strong>User2: </strong> sd</div>
<div><strong>User2: </strong> csd</div>
<div><strong>User2: </strong> c</div>
<div><strong>User2: </strong> sdc</div>
<div><strong>User2: </strong> sd</div>
<div><strong>User2: </strong> cs</div>
</div>
<div class="message-form">
<form class="new_message" id="new_message" action="/chatrooms/25/messages" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓" /><input type="hidden" name="authenticity_token" value="4NCGg4CJSb0jWbL+Xsx+FuNYTIUM/LD/el5IIuF3cRTHLXy9LzFAIUR+T5C8ATiJKeYdrbceMAeTc79E7OgLGg==" />
<textarea rows="1" class="form-control" autofocus="autofocus" name="message[body]" id="message_body">
</textarea>
</form>
</div>
</div>
</div>
</div>
</div>

Answer 1

I am pretty sure your problem is that using col-sm isn't working because your screen is smaller than what that column size is meant to accommodate. Try using col-xs instead.
Not to mention, you used fluid-container instead of container-fluid at one point.