One issue I'm facing is that elements within divs are aligning randomly without responding to any alignment tags. Additionally, some divs are creating extra space above or below their elements. I am using the 960 grid system and have not made any changes to the default CSS file for fear of causing errors.
I have created a test page here, where you might encounter some imperfect code :-D
Although still in its early stages (just like me), I feel stuck until I can fully grasp what's causing these alignment issues.
A prominent example on the test page is the bottom horizontal bar with elements below it. The bar leaves some dead space, while the elements underneath align inconsistently in their respective divs.
Why do elements fail to align consistently without explicit instructions, and why does extra space appear where none was specified?
I've considered individually positioning everything relatively, but I'm concerned this may disrupt the grid layout. Other than that, I'm at a loss.
Thank you!