Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.Start your free trial
Prath M9,631 Points
I followed the video exactly but my column containing the jumbotron message is squished to the left. How do I fix it?
The part with "Self-destructing messages..." in the first "col-sm-6" is squished to the left as though it were in mobile view. I am pretty sure I followed the video exactly but I can't seem to make it span the entire width of the jumbotron (3:16 in the video).
<!-- Jumbotron --> <div class="jumbotron"> <div class="container"> <div class="row"> <div class="col-sm-6"> <h1>Self-destructing messages are only a hop away.</h1> <p>Learn how to build this fun little app by signing up for a Treehouse account today! We'll teach you how to build both apps from scratch!</p> <p>Or download the app and try it first.</p> <p> <a href="#">iOS</a> <a href="#">Android</a> </p> </div> <div class="col-sm-6"> <div class="device pull-right"></div> </div> </div> </div> </div><!-- End Jumbotron -->
Prath M9,631 Points
I figured it out! Guil accidentally typed "sol-sm-6" for the first column. The first column is NOT supposed to span the jumbotron--meaning that my CSS is actually correct. Oh Guil, you rascal...
Just an FYI ,
Bootstrap uses a grid template which divides an element in 12 sections or columns. Any element with class
col-sm-6 will occupy 50% of its parent element, and float left. Your HTML looks fine, as long as you wanted to divide the
.row div into two equally-sized columns with the "Self destructing message.." and links in the left column, and the
.device pull-right div on the right column.. additionally, the
.pull-right class will cause that element to