Chore Door - Table View

Here is the project I’m having trouble with: https://www.codecademy.com/paths/web-development/tracks/build-interactive-websites/modules/web-dev-interactive-websites/projects/chore-door

My issue is that I can’t seem to be able to center .instructions-table although I changed the CSS code to .instructions-row {margin: 0 auto; width:400px; }

Please see below for the full code (HTML & CSS). Can someone help what I’m missing?

HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Chore Door!</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet" type="text/css">
  </head>
  <body>
    <div class='header'>
      <img src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/logo.svg">
      </div>
    <div class='title-row'>
      <img src='https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/star.svg'>
         <p class='instructions-title'>Instructions</p>
      <img src='https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/star.svg'>
    </div>
    <table class='instructions-row'>
      <tr>
        <td class='instructions-number'>1</td>
        <td class='instructions-text'>Hiding behind one of these doors is the ChoreBot.</td>
      </tr>
      <tr>
      <td class='instructions-number'>2</td>
        <td class='instructions-text'>Your mission is to open all of the doors without running into the ChoreBot.</td>
      </tr>
      <tr>
      <td class='instructions-number'>3</td>
        <td class='instructions-text'>If you manage to avoid the ChoreBot until you open the very last door, you win!</td>
      </tr>
      <tr>
      <td class='instructions-number'>4</td>
        <td class='instructions-text'>See if you can score a winning streak!</td>
      </tr>
    </table>
    <div class='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>
<div id='start' class='start-row'>
  Good Luck! 
</div>
 <script type="text/javascript" src="script.js">
    </script> 
  </body>
</html>

CSS:

body {
  background-color: #010165;
  margin: 0px;
}

.header {background-color: #00ffff;text-align: center;}

.title-row {margin-top:42px; margin-bottom:21px; text-align: center;}

.instructions-title {display: inline; font-size: 18px; color: #00ffff; font-family: 'Work Sans'};

.instructions-row {margin:0 auto; width: 400px; }

.instructions-number {padding-right: 25px; font-family:'Work Sans'; font-size: 36px; color: #00ffff;}

.instructions-text {padding: 10px; font-family: 'Work Sans'; font-size: 14px; color: #fff; }

.door-row {text-align: center;}

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

.start-row {margin:auto; width: 120px; height: 43px; font-family: 'Work Sans'; background-color: #eb6536; padding-top: 18px; font-size: 18px; text-align: center; color: #010165; margin-bottom: 21px; cursor: pointer;
}


.instructions-title {
  display: inline; 
  font-size: 18px; 
  color: #00ffff; 
  font-family: 'Work Sans'
};

Hello,

This line is causing the problem.

Thank you for looking into this.

I’ve reviwed the line but not sure why it is causing this error. The display problem I mentioned is related instructions table which doesn’t include the title row. Maybe I’m still missing the point?

You have a semi-colon that’s outside of the declaration block. It’s obstructing the following ruleset (which, in this case, is represented by .instructions-row).


.instructions-title {
  display: inline; 
  font-size: 18px; 
  color: #00ffff; 
  font-family: 'Work Sans'
}; <-------- // is obstructing the next line

.instructions-row {margin:0 auto; width: 400px; }  
1 Like