title: Bootstrap - Text flows out container
body: <p>I'm building a site with bootstrap. At one special page I have a strange problem:
  When opening the page in a big screen everything seems to be correct. But if you open it with a small display the text flows out of the container. Also the buttons (link buttons) have the same problem.
  <a href="https://i.stack.imgur.com/hXYRx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hXYRx.png" alt="example - text flows out of container"></a></p>
  
  <p>The HTML code is:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;!-- Die 3 Meta-Tags oben *müssen* zuerst im head stehen; jeglicher sonstiger head-Inhalt muss *nach* diesen Tags kommen --&gt;
    &lt;title&gt;ÖsterWeb&lt;/title&gt;
  
    &lt;!-- Ubuntu Font aus der Google Fonts API --&gt;
    &lt;link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'&gt;
  
    &lt;!-- Bootstrap --&gt;
    &lt;link href="css/bootstrap_mainindex.css" rel="stylesheet"&gt;
  
    &lt;!-- Unterstützung für Media Queries und HTML5-Elemente in IE8 über HTML5 shim und Respond.js --&gt;
    &lt;!-- ACHTUNG: Respond.js funktioniert nicht, wenn du die Seite über file:// aufrufst --&gt;
    &lt;!--[if lt IE 9]&gt;
              &lt;script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"&gt;&lt;/script&gt;
              &lt;script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"&gt;&lt;/script&gt;
          &lt;![endif]--&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="container hvcenter"&gt;
      &lt;!-- Container --&gt;
      &lt;div class="row"&gt;
        &lt;!-- Bootstrap Row --&gt;
        &lt;div class="col-lg-5"&gt;
          &lt;img src="img/Logo.png" alt="Logo" class="img-responsive"&gt;
        &lt;/div&gt;
        &lt;div class="col-lg-7"&gt;
          &lt;h1&gt;Welcome&lt;/h1&gt;
          &lt;p&gt;To show you the best content for you, please chose one of the following buttons.&lt;/p&gt;
          &lt;a href="neu/index.html" class="btn btn-block btn-info btn-lg"&gt;Are you looking for a new car?&lt;br&gt;Here you will find it.&lt;/a&gt;
          &lt;a href="modern/index.html" class="btn btn-warning btn-block btn-lg"&gt;You are searching for a used vehicle&lt;br&gt;We can show you offers&lt;/a&gt;
          &lt;a href="reseller/index.html" class="btn btn-block btn-success btn-lg"&gt;Your car needs a repair service?&lt;br&gt;Take a look!&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;!-- jQuery (wird für Bootstrap JavaScript-Plugins benötigt) --&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
    &lt;!-- Binde alle kompilierten Plugins zusammen ein (wie hier unten) oder such dir einzelne Dateien nach Bedarf aus --&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The generated CSS code from bootstrap:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>html, body {
      height: 100%;
      position: relative;
  }
  
  .container {
      max-width: 85%;
      border-radius: 36;
      padding: 3em;
      background-color: silver;
  }
  
  .hvcenter {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  }
  
  h1 {
      font-size: @font-size-h1*2.5;
      margin-top: -0.2em;
  }
  
  p {
      font-size: @font-size-base*2;
  }
  
  
  img {
      alignment-adjust: central;
      vertical-align: middle;
      text-align: center;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Do you know a solution for this problem?
  THX for every comment.</p>