I was able to sort out the width problem. Rather than go into a lot of detail, I just forked your pen with my changes:
A lot of the fixes are at about line 8. You want everything in that bio section to be inside of a well, so I wrapped it all in another div. As for the list items dropping below the picture, it was a simple matter of changing the
col-sm-# classes to
col-xs-#. The ‘xs’ means that the column rule starts at the smallest width, which is about mobile size, while ‘sm’ is a bit larger. Because you hadn’t defined a rule for the smaller size, the browser went with the default behavior.
There were a few other issues to note for future projects:
It’s generally not a good idea to nest
container-fluid classes. You can have as many as you want in a project, and you can sometimes nest a
container inside a
container-fluid, but it’s best to avoid until you know exactly what you’re going to get out of it. The problem is that it starts messing with your padding.
Stay far away from inline styles. All of your style declarations should be in your stylesheet so it’s easy to read and to think about.
There are buttons in the upper right side of each editor window, ‘Tidy’. You had a lot of extra white space in there which can make it hard to read, but it’s difficult to fix that. The ‘tidy’ buttons do most of the work for you. If it’s easier to read, it’s easier to catch bugs!
Congrats on your first project!