Tribute page #main, center img

Code Feedback
1

Hello, I was wondering if anyone could help me, it’s my very first project, I’ve been stucked here for days and I can’t seem to pass the last test. I can’t figure out how to center the img and I don’t really get the #main, it doesn’t seem to work. Thank you!

https://codepen.io/luobreg/pen/ZEzNxOB?editors=1100

1 Like
2

I just finished my first project too. I can see where your issues are.

First, remove the style tags from your css, those aren’t needed and hindering it from displaying what you want!

You’ll be able to make changes from there :slight_smile:

1 Like
3

I messed around with your code and got it all to work the way I think you meant it to. It was good practice for me to sort it out! I didn’t want to post it in case you want to figure it out on your own, but let me know and I’ll share the codepen :).

4

Thank you for your help!! And I’m really glad it helped you as well!! Now I can add the style I want, (yeah, I wasn’t actually going for 80% padding and color red, I just needed it to pop up to see it worked) although I don’t know if you figured out about the centered image?

5

https://codepen.io/Aries17/pen/oNNNGor?editors=1100

Here is the solution I came up with. I’m still learning too so it might not be the best one. See if it helps you :). I used position: relative; and margin: 0 auto; on the #img-div.

1 Like
6

Hi (the code isn’t displayed correctly. I need to figure that out.)

I hope the following info is helpful.

Your tribute page is good and clean except for the image not centering.

I went over your code and the changes listed centered the image

In the id, #image, a width of 50% is needed and the margin of 7px taken out.

#image{
  max-width: 400px;
  display: block;
 margin-left: auto;
  margin-right: auto;
  width: 50%;
  /*margin: 7px;*/

In the #main, the max-width of 1800px isn’t necessary. I commented it out with no change to image.

There were some other problems I saw in the structure of your HTML code.
DOCTYPE is the first line followed by html then head>which will include the scripts, fonts, and title.

I did notice that you made a id called #main. The id isn’t necessary. I took out the # and assigned the properties to the main element.

In some places closing tags were missing and at least 1 opening tag () wasn’t there.

In the img element, there is a call for a class of “center” which isn’t declared in the CSS.

I suggest going over the structure/levels within your code which will help prevent mistakes creating a cleaner code. I don’t know if you used Codepin to write in, but if you use a code editor, it would be easier to see the overall structure.

Keep at it.

7

Hi, thank you so much for your feedback, to me the id #main is not necessary but it’s on the user story!
I’m using codepen, I already submitted it after passing all the tests, I think the next time I’ll try to focus on the aesthetic, but first I want to focus on the structure.

Thank you all for taking the time to help me!