Tribute Condition 2 (Fixing This for Over a Month)

HTML-CSS
1

Hi everyone!

I’ve been working on the first HTML/CSS project for over a month, but, to be fair, college has taken up a lot of my time. I remember submitting the project with all tests working, but now condition 2, the one I spent hours fixing, has popped up again.

I’ve checked several topics on the same problem, including text-align, float, display, transform, margin, and padding, to no avail.

My CodePen is linked here. Thanks in advance! :grinning:

2

I’m no CSS wizard, but looking at this, I can see that your image is not centered.

I think the problems are here:

#img-div {
  display: block;
  align-items: center;
}

#image {
  border-color: #CFB53B;
  border-width: 20px;
  border-style: solid;
  border-radius: 20px;
  max-width: 100%;
  display: block;
  height: auto;
  margin-left: 0 auto;
  margin-right: 0 auto;
}

I’m not sure what align-items: center; does here - you’re not display: flex;.

You have the image set at 100% width, but then add a border on top of that - I think that is putting it off center. Try a width of 80% or get rid of the border. Also, what does this mean?

  margin-left: 0 auto;
  margin-right: 0 auto;

I think what you want is:

  margin: 0 auto;

which is the same as saying:

  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;

When I fix those, it passes for me.

1 Like
3 
#image {
  border-color: #CFB53B;
  border-width: 20px;
  border-style: solid;
  border-radius: 20px;
  max-width: 100%;
  display: block;
  height: auto;
  margin-left: 0 auto;
  margin-right: 0 auto;
  box-sizing: border-box;
}

The box-sizing property defines how the width and height of an element are calculated: should they include padding and borders, or not.
by default it is set to content-box, i changed the value to border-box, and the test passed, to have more information about this property you can visit the link below:

4

Thank you both! I’ve tried both solutions and they work (sadly I can only award one). Thanks again for looking at my code :slightly_smiling_face:

P.S. Does putting a border mess up centering everything? I like to put borders on a lot of my creations, so it might be important for future projects.

5

sadly I can only award one

No biggy, don’t worry about it.

Does putting a border mess up centering everything?

Not normally. You just gotta figure out how to work with it.