On this home page, I need to make the 3 posts in the desserts section (on the left side) float so they are a row of 3. I’ve been all through the CSS, but I’m just not seeing what’s preventing them from floating. I’m using this code:
Those styles are targeting the container div, so the whole thing is set to a max-width of 300px, meaning you just get one narrow column. You need instead to target the individual boxes inside that, something like this:
Absolutely. Now I’m having trouble getting everything spaced correctly. I need about 35-40px between each circle while keeping the circles at around 200px wide. Everything I try makes the circles shrink in size. Do you see the problem?
I forgot that I needed to remove the padding from the larger .entry section, so I did that. I also increased the width of .home-bottom .featuredpost .entry to 230px. Then I added the 40px right padding and although they are now spaced correctly, the images are only 190px wide instead of the required 200px.
If I increase the width of .home-bottom .featuredpost .entry to 240px, the images are correctly sized, but obviously, they won’t fit in a row of 3.
Can I ask one more question while I’m here? It’s about a different section of this site. In the right sidebar, there’s a subscribe form that’s supposed to overlap the right side of the container. It should look like a ribbon like the ones on the left but for some reason, I can’t get it to overlap unless I take the padding off the sides of .site-inner. But I need that padding…
I have the right margin set to -50px/-5rem right now and it’s not quite working. For some reason, it won’t extend past the page container. I’m so confused since it’s working on the left side just fine.
The problem is that your ribbon is 376px wide but it’s inside a column that is only 330px wide. Anything outside the 330px is basically overflow and the margin won’t really work.