I’m having trouble creating consistent widths of sections and divs even though all the elements seemed to be styled correctly. You can see on this page the following issues:
category titles are not center on top of 3 blog posts
the page has a lot of blank space on the right side (none of my other pages on the website have this problem)
footer and green CTA section are not going all the way across the page
Please let me know what I’m doing wrong, thank you!
I’m assuming the first issue is referring to this spacing? Where the left edge of the image isn’t aligned with the left edge of the header?
If so, the problem is padding, the images have 20px of left and right padding and the section title only as 10px. If you increase that to 20 everything will align.
The width on the right is being caused by the width property on the blue-background element:
Since this element is displayed absolute, setting the width to 100% is going to cause it to inherit the width of the parent element, in this case the section wrapping it with a width of 1440, making the width of the blue element 1440 as well, but flowing off the right side of the screen. Try removing that, it should take care of the third issue as well
Thank you! re: the blue-background, when I remove absolute - it doesn’t show up anymore, what should it be set as?
also - the centering issue i was referring to is when I make the screen really wide, the elements don’t stay in the center (screen shot below). how do i get the sections to stay in the center even when the screen is really wide?
@Jenna - I actually disagree with @Kevin_Mooney here (Kevin, I think you may have misread what Jenna’s issue is), what you should actually do is add a div to wrap around your section titles with the class div-40-60-padding which as you can see is used to contain content in other areas of your site, for instance the footer: