Bootstrap responsive problems - html

Question

So i've been working on a little project, and noticed that i have to do more media queries than i would like to?
From my understanding, bootstrap should be taking care of the responsiveness for me, so i'm sure i have done something wrong. Describing the problem in words is hard, so you can take a look at this image:
Here is how it looks, desktop size:
http://gyazo.com/be1c1d6f7af31adf6cf2c21fe1697f67
Here is how it looks, when scaled down to mobile:
http://gyazo.com/27bb7da880fd7a789e8b57c88e0b9759
As you can see, the content moves OUT of the white box, and doesn't go down to the next line, which i think it should do by default, or am i overestimating Bootstrap?
Here is some of the code that makes the box:
.overview {
height: 500px;
background: white;
margin-top: 40px;
box-shadow: 5px 5px 5px #f2f2f2;
border-left: 2px #f2f2f2 solid;
border-top: 2px #f2f2f2 solid;
border-radius: 7px;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,900' rel='stylesheet' type='text/css'>
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 velkommen">
<i class="glyphicon glyphicon-cog topglyph"></i>
<h1>Kontrolpanel</h1>
<br>
</div>
</div>
<div class="row">
<div class="col-lg-4 brugeroplysninger">
<h1><span class="glyphicon glyphicon-user orange"></span> Oplysninger</h1>
<div class="brugeroplysninger-divider"></div>
<ul>
<li><span class="glyphicon glyphicon-envelope orange brugeroplysninger-glyph-padding"></span> <span class="brugeroplysninger-current">mail#mail.com</span>Skift
</li>
<li><span class="glyphicon glyphicon-tag orange brugeroplysninger-glyph-padding"></span> <span class="brugeroplysninger-current"> Alexander</span>Skift
</li>
<li><span class="glyphicon glyphicon-tags orange brugeroplysninger-glyph-padding"></span> <span class="brugeroplysninger-current"> Alexander</span>Skift
</li>
<li><span class="glyphicon glyphicon-asterisk orange brugeroplysninger-glyph-padding"></span> <span class="brugeroplysninger-current">******</span>Skift
</li>
<li><span class="glyphicon glyphicon-picture orange brugeroplysninger-glyph-padding"></span> <span class="brugeroplysninger-current">Billede</span>Skift
</li>
</ul>
</div>
<div class="col-lg-6">
<div class="overview">
fdsfsdfdsfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf
</div>
</div>
</div>
</div>
</div>
What am i doing wrong? Please tell me if i need to show more code, i'm sure i'm doing something wrong.
Or do i just have to keep doing media queries?
Note:
I tried assigning a width to the class overview, no result. THat includes an auto width, a max-width and a fixed width.
Thanks for your time!

Answer 1

It hasn't got to do with Bootstrap. By default browsers don't break words into two parts when they don't fit on a line anymore. In order to be able to do hyphenation properly they would need to have knowledge about the language and how to split words into syllables. Browser support isn't there yet but
hyphens: auto;
should do it in the future. If you don't care where the word is split simply add
word-break: break-all;
to the overview class. And if you simply don't want to show the part of the word that overflows add
overflow: hidden;
to the overview class.

Answer 2

You may also look into the wbr tag: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr
represents a position within text where the browser may optionally break a line