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:
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.
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:
I would be super grateful for any help!