styles.css

#box {
  position: relative;
  margin: auto;
  margin-top: 30px;
  display: block;
  width: 80%;
  height: 600px;
}
/* staff outline */
#staff {
  position: absolute;
  width: 100%;
  height: 10%;
  border-right: 2px solid black;
}
.lines {
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  border: 1px solid black;
}
#e {
  bottom: 0%;
}
#g {
  bottom: 25%;
}
#b {
 bottom: 50%;
}
#d {
  top: 25%;
}
#f {
  top: 0%;
}
/* images */
#treble {
  position: absolute;
  height: 180%;
  bottom: -50%;
  left: -1%;
}
#bflat {
  position: absolute;
  height: 50%;
  bottom: 37%;
  left: 5%;
}
#commontime {
  position: absolute;
  height: 110%;
  left: 9%;
}
#rest {
  position: absolute;
  height: 70%;
  right: 33%;
  top: 7%;
}
/* note and bar line classes */
.bar-line {
  position: absolute;
  box-sizing: border-box;
  height: 100%;
  border: 1px solid black;
}
.open {
  position: absolute;
  box-sizing: border-box;
  height: 26%;
  width: 2%;
  border: 2px solid black;
  border-radius: 73% 50% 73% 50%;
}
.filled {
  position: absolute;
  box-sizing: border-box;
  height: 26%;
  width: 2%;
  border: 2px solid black;
  background-color: black;
  border-radius: 73% 50% 73% 50%;
}
.note-line {
  position: absolute;
  height: 70%;
  border: 1px solid black;
}
.dot {
  position: absolute;
  box-sizing: border-box;
  height: 6%;
  width: 0.5%;
  background-color: black;
  border: solid black;
  border-radius: 50%;
}
.f {
  bottom: 0%;
}
.a {
  bottom: 25%;
}
.c {
  top: 25%;
}
.g {
  bottom: 13%;
}
.b {
  bottom: 40%;
}
.d {
  bottom: 60%;
}