Chore Door Door not centering

Language Help CSS
1

Hello, my code is working just fine and I am able to play the game successfully. The only problem I am facing is that the doors are not centering when I am telling them to, they stay stuck to the left.

HTML:

  <div id="door-row">

    <img id="door1" class="door-frame" src = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg" >

    <img id="door2" class="door-frame" src = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg" >

    <img id="door3" class="door-frame" src = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg" >

 </div>

CSS

.door-frame {
cursor: pointer;
padding: 10px;
text-align: center;
}

2

Hey there! Welcome to the forums :slight_smile:

Did you try refreshing the page after you wrote your CSS rules? Whenever I alter my CSS file I have to reload the page, otherwise I won’t see any changes.
I hope this helped!

1 Like
3

I had this issue too. You want the text-align property to be applied to door-row, not door-frame, as you wish to center the contents of door-row (ie. the three doors) not the contents of each frame. That should fix your issue! Also be sure to give door-frame display.inline if you want the doors next to each other rather than stacked.

2 Likes