title: Bootstrap width
body: <p>I have already read the previous questions/answers about this but i'm still not fully grasping it.</p>
  
  <p>I'm "making" a website for my cousin with a simple div and a list.</p>
  
  <p>Underneath i want the timeline example shown here: <a href="https://codepen.io/ksantangelo/pen/ZBOpoJ" rel="nofollow noreferrer">https://codepen.io/ksantangelo/pen/ZBOpoJ</a></p>
  
  <p>If i use the code without the css it works fine, but once i add the css the timeline is shown next to the previous div with my list. The part of the css file causing it is:</p>
  
  <pre><code>@charset "UTF-8";
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 100px;
    font-family: 'Source Sans Pro', arial, sans-serif;
    font-weight: 300;
    color: #333;
    box-sizing: border-box;
  }
  </code></pre>
  
  <p>I just don't understand why. And what is the easiest way in bootstrap to make sure a section will always be full width?</p>