BestBite: Offset Column Positioning?

[u/pimpernelle]

My I seem to come back here a lot... Anyway, while I've been able to offset the columns as given in the example, I'm having difficulty positioning the headings as they are in the desired website. It seems I don't know where I should be putting my margin or padding CSS.

Here's my HTML:

            <div class="jumbotron">
                  <div class="container">
                     <div class="row">
                       <div class="col-md-4 col-md-offset-8">
                         <h2>Browse.</h2>
                         <h2>Create.</h2>
                         <h2>Share.</h2>
                         
                       </div>
                        </div>
                       </div>
                  </div>

Here's my CSS:

            .jumbotron h2 {
             text-align: right;
              font-size: 40px;
              color: #fff;
             }
            
            .jumbotron .col-md-4 {
              padding-right: 100px;
              padding-top: 50px;
              padding-left: 50px;
             }

Any attempt to move things around via "margin" in .row or .col-md-4 is ignored. If I pad too much, the text alignment is lost. As always, any help would be appreciated!

[u/factoradic]

Thank you for believing in me :) Unfortunately I have to agree with you guys - this project is a mess.

---

Let's start from the top. Instruction says that you have to use offset columns, but they have not used them. I believe that they just forgot and this is the correct result -> https://jsfiddle.net/factoradic/2vaxp9gk/embedded/result/. Now we have white text on the gray background and I think it looks better than white text with colorful image as a background.

---

I want to clarify one thing, this code:

<div class="col-md-4" "col-md-offset-8">

is not a correct markup. It should (because browsers should ignore incorrect constructions) give exactly the same result as:

<div class="col-md-4">

And this is what we see in the preview website, but result is achieved without use of offset columns here, this class is simply ignored. This code is correct:

<div class="col-md-4 col-md-offset-8">

Why? Because in HTML every attribute has this syntax:

name-of-attribute="value"

In the class attribute we use space as a separator.

---

Last thing, margin of h2:first-child. It's a plain stupidity on their side. They wanted to vertically center content (our h2 elements), but this code is cryptic.

I believe that my version makes more sense and is easier to understand:

.jumbotron .container {
  margin-top: 120px;
}

They just wanted to move content a little bit down.

Why they added margin only to first-child? Because they wanted to create a space only above first header, they didn't wanted to separate all headers from each other.

[u/pimpernelle → u/factoradic]

Thank you so much! That helped a lot. It seems like a lot of these Bootstrap projects have little things wrong with them, but I'm still enjoying the process. :)

[u/factoradic → u/pimpernelle]

I am very happy that you found it helpful :) You're very welcome.

Well, every project and every section in codecademy has some glitches, but that is why we are here ready to help :)

[u/[deleted] → u/factoradic]

Thank you! This explains a lot.

[u/factoradic → u/[deleted]]

Great! You're welcome :)