title: Text overflowing the sides of its container div
body: <p>My text inside the containing div overflows it from the sides where it should be actually wrapping automatically.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html {
    padding: 0;
    margin: 0;
  }
  
  body {
    background: #E4E4E4;
    height: 100%;
    width: 100%;
  }
  
  #main {
    display: block;
    background: white;
    width: 960px;
    margin: 0 auto;
    position: relative;
    padding: 5px 5px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;div id="main"&gt;
      &lt;p&gt;jjfaljfejjfkadjf;lj;jmvwutpvwjfjdsjfklsdkdfjklsjfkljwjeiojfklslfkjsvfoiwjeorfjviw nfwvfjojwkdsklflskjfvwiernvejveurvnwejfkdsjwjjrfjiowjeionvkjlksjdfkljkljdwijiodjfiovnwjoiejoijfiojkjsljfdkjslfiejskdklfjlksjfeijskdjfklsjkldjfwjnfklsjfwoevjnwfdjshfk
        fsdkjfsjdfkjksjdfkjsljfdkljskl
      &lt;/p&gt;
    &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And here is what is displayed:</p>
  
  <p><img src="https://i.stack.imgur.com/9zEeT.png" alt="Screenshot"></p>
  
  <p>I have read other questions but none of them solves my issue. The thing is that the text does not overflow the bottom of the div. Is it something to do with the width I have set for the div?</p>