You’re using Bootstrap for the first project, which I did, too, before the Beta was launched. When I went to my first meetup, I was convinced to restart my learning there, and it was the best decision I made in FCC. However, if you want to complete this project in Bootstrap, then refactor it in raw CSS using media queries to make it responsive in the Beta (I did, it’s not that hard the second time around), then let me give you the advice to fix what you have.
Zeninvader’s excellent explanation of the Bootstrap Grid system will help you visualize the issue.
At viewports smaller than a medium one, your list takes up 100% of the width. At viewports “medium” and larger, your declaration of class="col-md-6" makes a half width (6 out of 12 vertical columns) container for your list, which is why it is off-center and never crosses the midline. You could, if you wanted the text to go no wider, declare some empty divs to the sides:
<div class="col-md-3"></div>
<div class="col-md-6">Your list goes here...</div>
<div class="col-md-3"></div>
What this is is telling Bootstrap.css to do (via hidden media queries that beta.freecodecamp.org will teach you how to do yourself) is:
- at viewports smaller than “md” (<992px wide), render all three divs as the browser would without bootstrap:
- Empty Div (no space on screen)
- Your List (occupying 100% of the viewport width, responsive to the viewer input that resizes the window)
- Empty Div (no space on screen)
- at viewports 992 px or wider, bootstrap will create, Left to right on the screen:
- Empty column (3 out of 12 columns wide, or 1/4 of the screen with)
- Your list (6 out of 12 columns wide, or 1/2 of the screen width).
- Empty column (3 out of 12 columns wide, or 1/4 of the screen with).