Div not centering and images don't have equal ratio even though their size percent is the same

Get Help Make & Deploy a Website
#1

Hello world!

I have only been practicing coding for about three months (this is actually my very first post asking for help!). I have completed the “Build a Website” course, and (somewhat) completed the final Colmar Academy project, but I am not super satisfied with the results. Here are the two major issues I ran into:

  1. I just can’t get the image in the top banner section and information section below that to be the same width. I have set each container to 60% according to the wireframe (and set the corresponding right container to 40%), but they are not matching up. I’ve played with min/max width, tried setting height to auto, but nothing seems to work. If you go to my example it will appear to be the same size, but that is only because I altered the width of one container in the info section to make it seem that way (these are commented in my code). when you change the screen size, you can usually see the difference, and I just know there has to be a better way of keeping them the same size.

  2. When the screen width is smaller, the top banner text won’t center. It seems like the anchor element button is going out of the container. I’ve tried many things to make it center, but nothing seemed to work. Again, it may appear to be centered, but that is only because I played with different padding/margins/widths to create the illusion of it being centered, but it really isn’t. This is also commented in my code.

And, here’s my code and a link to my final project:

Website

Code

I would be super grateful for any help!

Thanks,
Sam

#2

Hi Sam,

That’s because you use margins instead of paddings for the spacing. Set the left containers to width: 60%and the right containers to width: 40% (no min- or max-widths). Then replace the the margin by padding in both containers. Than it should work.

You set the parent container to display: inline on smaller viewports. If you don’t want to use flex boxes on small viewports, it would be a better praxis if you’d use ‘block’ rather than ‘inline’ for the parent element. You can then center the children with margin: auto if they are block level elements or with text-align: center if they are inline elements.
You could still use display: flex for small viewports though and set it to flex-direction: column Then you could center the children with flex styles.

1 Like
#3

Thanks for the tips! Changing the display of the banner text’s parent container to block worked perfectly. The only thing is, I tried to change all the margins for the banner and info sections to padding, and took out max/min-widths, but the large images still aren’t exactly the same size. They are close, but off a few pixels still. I updated the website, so let me know if you figure out what else I might be able to change to make the images the same size.