title: paragraph exceeds the maximum width of the page
body: <p><a href="http://imageshack.us/photo/my-images/690/printef.jpg/" rel="nofollow">http://imageshack.us/photo/my-images/690/printef.jpg/</a>
  the text goes out of the body page and I don't know why is this happening. the text should start from another line at the blue line. </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="keywords" content=""&gt;
  
      &lt;link rel="stylesheet" type="text/css" href="css/main.css"&gt;
  
      &lt;script type="text/javascript" href=""&gt;&lt;/script&gt;
      &lt;title&gt; tech &lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body id="skin" style="background-image:url(img/bck.jpg)"&gt;
      &lt;div id="root"&gt;
          &lt;div id="Meniu_header"&gt;
              &lt;div id="top"&gt;
                  &lt;header id="top_header" style="background-image: url(top.jpg)"&gt;
                      &lt;img src="img/200.jpg"&gt;
                      &lt;h1 id="h1"&gt; UNDER CONSTRUCTION &lt;/h1&gt;
                  &lt;/header&gt;
  
                  &lt;nav id="meniu"&gt;
                          &lt;ul&gt;
                              &lt;li&gt; Acasa &lt;/li&gt;
                              &lt;li&gt; Servicii &lt;/li&gt;
                              &lt;li&gt; Contact &lt;/li&gt;
                          &lt;/ul&gt;
                  &lt;/nav&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
              &lt;div id="test"&gt;
                  &lt;h2&gt; sajbvljaslblas &lt;/h2&gt;
                  &lt;p&gt; afjkvbafjlbljabadflblajjlaerbladfblaerjlblae &lt;/p&gt;
                  &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
                  &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
              &lt;/div&gt;
  
              &lt;div id="pagina"&gt;           
                  &lt;div id="stanga"&gt;
                      &lt;div id="optiuni"&gt;
                          &lt;ul id="st_optiuni"&gt;
                              &lt;li&gt; Aluminiu &lt;/li&gt;
                              &lt;li&gt; Plastic &lt;/li&gt;
                              &lt;li&gt; Fonta &lt;/li&gt;
                              &lt;li&gt; Otel &lt;/li&gt;
                          &lt;/ul&gt;
                          &lt;div id="st_scris"&gt;
                              &lt;p&gt; adbnaeasfbabfa &lt;/p&gt;
                              &lt;p&gt; adfbadf fsdbhadad &lt;/p&gt;
                              &lt;p&gt; adfbad af afsd &lt;/p&gt;
                              &lt;p&gt; a dfbad  &lt;/p&gt;
                              &lt;p&gt;  adfba fa fd&lt;/p&gt;
                              &lt;p&gt; adfb adf  adfb &lt;/p&gt;
                              &lt;p&gt; adfb adfb ad &lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
  
              &lt;div id="dreapta"&gt;
              &lt;section id="dr_articole"&gt;
                  &lt;article&gt;
                      &lt;header&gt;
                          &lt;h2&gt; Titlu &lt;/h2&gt;
                          &lt;p class="problema"&gt; This is a long text that it's makeing me problems ..........aaaaaaaaaaaaa aaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaa &lt;/p&gt;
                      &lt;/header&gt;
                  &lt;/article&gt;
              &lt;/section&gt;
              &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;footer&gt;
              &lt;p id="footer"&gt; Copyright © 2013    &lt;/p&gt;
              &lt;a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/ro/"&gt;&lt;img alt="Licenţa Creative Commons" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-nd/3.0/ro/80x15.png" /&gt;&lt;/a&gt;.
          &lt;/footer&gt;
  
      &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>and the css is:</p>
  
  <pre><code>*{
      margin: 0px;
      padding: 0px;
  }
  header, nav, section, article, footer{
      display: block;
  }
  body{
      width: 100%;
      display: -webkit-box;
      -webkit-box-pack: center;
  }
  footer{
      display: -webkit-box;
      -webkit-box-pack: center;
      font-family: Arial, sans-serif;
      font-size: 10px;
      color: #FFFFFF;
  }
  #skin{
      background-repeat: no-repeat;
      background-attachment: fixed;
  }
  #root{
      max-width: 1000px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-box-flex: 1;
      border: 2px solid white;
  }
  #top{
      display: -webkit-box;
      -webkit-box-orient: vertical;
  }
  #top_header{
      display: -webkit-box;
      -webkit-box-orient: horizoantal;
      padding: 20px;
  }
  #h1{
      border: 1px solid red;
      font: 50px bold Arial;
      color: #FFFFFF;
      margin-left: 50px;
  }
  #meniu{
      color: white;
      display: -webkit-box;
      -webkit-box-orient: horizoantal;
      background: green;
      border-bottom-left-radius: 8px;
      border-bottom-right-radius: 8px;
  }
  #meniu li{
      display: inline-block;
      text-decoration: none;
      list-style: none;
      padding: 5px;
      font: bold 17px Tahoma;
  }
  #test{
      border: 2px solid red;
      width: 800px;
      height: 400px;
      margin-top: 20px;
      margin-left: 100px;
  }
  #pagina{
      display: -webkit-box;
      -webkit-box-orient: horizontal;
      margin-top: 50px;
      border: 4px solid blue;
  }
  #stanga{
      display: -webkit-box;
      -webkit-box-orient: vertical;
      border: 3px dashed red;
  }
  #st_optiuni{
      display: -webkit-box;
      -webkit-box-orient: vertical;
      width: 200px;
      list-style: none;
      padding: 5px 5px 5px 10px;
      margin-top: 50px;
      border-radius: 8px;
      color: #FFFFFF;
      border: 2px solid yellow;
  }
  #st_scris{
      display: -webkit-box;
      -webkit-box-orient: vertical;
      width: 200px;
      list-style: none;
      padding: 5px 5px 5px 10px;
      margin-top: 50px;
      border-radius: 8px;
      color: #FFFFFF;
      border: 2px solid yellow;
  }
  #dreapta{
      display: -webkit-box;
      -webkit-box-orient: vertical;
  }
  #dr_articol{
      -webkit-box-flex: 1;
      border: 1px dashed yellow;
  }
  .problema{
      color: white;
  }
  </code></pre>