Chore Door Door not centering

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.


  <div id="door-row">

    <img id="door1" class="door-frame" src = "" >

    <img id="door2" class="door-frame" src = "" >

    <img id="door3" class="door-frame" src = "" >



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

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

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.