Can't get the nested box to appear behind my input fields

<!DOCTYPE html>
<html lang='en'>
    <head> 
        <link href="./My stuff/resources/css/index.css" type="text/css" rel="stylesheet">
        <title>Where Magic Happens</title>
    </head>
        <body>
            <div class='outterBox'>
                <form>
                    <div class='enterBox'>
                        <input type='text' placeholder="Enter id" class="enter">
                        <input type='text' placeholder="Enter password" class="enter">
                    </div>
                    <button class='enterButton'>Enter</button>
                </form> 
            </div>
        </body>
     </footer>
</html>

* {
  /* border: 1px solid red; */
  margin: 0;
  padding: 0;
}

.outterBox {
  position: absolute;
  width: 490px;
  margin-top: 40px;
  padding-bottom: 700px;
  background: slateblue;
  bottom: 0;
  left: 0;
}

.enter {
  color: brown;
  position: static;
  border-radius: 4px;
  background-color: gold;
  font-weight: 300; 
  font-family: Helvetica Neue, Helvetica, Sans-serif; 
  align-content: center;
  width: 170px;
  color: black;
  left: 100px;
}

.enterButton {
  color: red;
  position: relative;
  padding-right: 2px;
  z-index: auto;
  font-size: 1.5em;
  border-radius: 3px;
  background-color: skyblue;
  align-content: center;
}

.enterbox { 
  position: absolute;
  height: auto;
  width: auto;
  right: 50px;
  border: 5px solid red;
  z-index: auto;
  margin: 40px;
}

I'm trying to nest the enter fields each inside a box, however I can not get the box to show up.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Solution

CSS is case sensitive, your box is class enterbox (with small letter b) but your HTML attribute looks for enterBox (with capital letter B).

* {
  /* border: 1px solid red; */
  margin: 0;
  padding: 0;
}

.outterBox {
  position: absolute;
  width: 490px;
  margin-top: 40px;
  padding-bottom: 700px;
  background: slateblue;
  bottom: 0;
  left: 0;
}

.enter {
  color: brown;
  position: static;
  border-radius: 4px;
  background-color: gold;
  font-weight: 300; 
  font-family: Helvetica Neue, Helvetica, Sans-serif; 
  align-content: center;
  width: 170px;
  color: black;
  left: 100px;
}

.enterButton {
  color: red;
  position: relative;
  padding-right: 2px;
  z-index: auto;
  font-size: 1.5em;
  border-radius: 3px;
  background-color: skyblue;
  align-content: center;
}

.enterBox { 
  position: absolute;
  height: auto;
  width: auto;
  right: 50px;
  border: 5px solid red;
  z-index: auto;
  margin: 40px;
}

<!DOCTYPE html>
<html lang='en'>
    <head> 
        <link href="./styles.css" type="text/css" rel="stylesheet">
        <title>Where Magic Happens</title>
    </head>
        <body>
            <div class='outterBox'>
                <form>
                    <div class='enterBox'>
                        <input type='text' placeholder="Enter id" class="enter">
                        <input type='text' placeholder="Enter password" class="enter">
                    </div>
                    <button class='enterButton'>Enter</button>
                </form> 
            </div>
        </body>
     </footer>
</html>