Reply To: aligning a heading, an image and troubleshooting a bootstrap carousel

[drone4four]

In my follow up post there I answered my initial two questions. I have just answered my third question. The solution was to copy all the CSS rules with “creative-” elements, duplicate them but replace the ‘creative-‘ elements with ‘appeal-*’. I then modified the corresponding class names in the my HTML. Now both the creative and appeal carousels scroll perfectly. I am not sure why this works, I just know that it does.

Here is my working testcase with a few further content and form changes and updates:
http://www.angeles4four.info/nolkirne_final_adapted_code_combat_mutated_with_content_headings_carousel_modded/

I have two final questions which I am asking for clarification now:

#4
Where in my CSS could I specify an increase in the padding between “THE APPEAL TO SUBGENIUS EVANGELICALS” heading (the thick green png line) and the indicator buttons? The spacing is actually quite nice at narrower resolutions, but when the window is maximized, there really isn’t enough padding.

Here is the heading class element:
.heading{
padding: 60px 60px;
}
.heading h1{
background: url(img/heading.png) no-repeat;
background-position: center bottom;
padding: 0 0 60px 0;
}
I tried many value combinations for both of these padding properties which didn’t get me any closer to where I am trying to go.

My next question is also about padding, just for the appearance of padding in a different location in my markup:

#5
Where in the CSS could I specify an increase in the padding between the “FLAGSHIP RESEARCH” heading (h1) and the images at both narrower and wider resolutions?

Thanks for your attention.