Update styles.css

styles.css

@@ -1,5 +1,6 @@
 body {
   margin: 20px;
+  /* Adds margin around the body */
   background-color: lightgray;
 }
 
@@ -27,3 +28,255 @@ body {
   position: relative;
   padding: 50px;
 }
+
+.text {
+  position: absolute;
+  top: 50%;
+  left: -120px;
+  transform: translateY(-50%);
+  font-size: 20px;
+  padding-bottom: 3px;
+  color: red;
+  border-bottom: 3px solid red;
+}
+
+.text2 {
+  position: absolute;
+  top: -30px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 20px;
+}
+
+.text3 {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  font-size: 20px;
+}
+
+.text4 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: red;
+  font-size: 20px;
+}
+
+/* Container for content-box vs. border-box demonstration */
+.container {
+  background-color: #adb5bd;
+  width: 800px;
+  margin-bottom: 50px;
+}
+
+/* Item with content-box box-sizing (default) */
+.item1 {
+  background-color: lightgreen;
+  width: 100px;
+  height: 100px;
+  padding: 10px;
+  box-sizing: content-box;
+  border: 5px solid red;
+}
+
+/* Item with border-box box-sizing */
+.item2 {
+  background-color: lightcoral;
+  width: 100px;
+  height: 100px;
+  padding: 10px;
+  box-sizing: border-box;
+  border: 5px solid rgb(114, 0, 0);
+}
+
+.item3 {
+  background-color: lightgoldenrodyellow;
+  width: 100px;
+  height: 100px;
+}
+
+.item4 {
+  background-color: lightseagreen;
+  width: 100px;
+  height: 100px;
+}
+
+/* Flexbox container, centered on the page */
+.container2 {
+  background-color: #adb5bd;
+  width: 800px;
+  display: flex;
+  margin: 0 auto;
+  margin-bottom: 50px;
+}
+
+.item5 {
+  background-color: lightgreen;
+  width: 100px;
+  height: 100px;
+}
+
+.item6 {
+  background-color: lightcoral;
+  width: 100px;
+  height: 100px;
+}
+
+.item7 {
+  background-color: lightgoldenrodyellow;
+  width: 100px;
+  height: 100px;
+}
+
+.item8 {
+  background-color: lightseagreen;
+  width: 100px;
+  height: 100px;
+}
+
+/* Flexbox container with justify-content properties */
+.container3 {
+  background-color: #adb5bd;
+  width: 800px;
+  display: flex;
+  justify-content: center;
+  justify-content: space-between;
+  margin-bottom: 50px;
+}
+
+.item9 {
+  background-color: lightgreen;
+  width: 100px;
+  height: 100px;
+}
+
+.item10 {
+  background-color: lightcoral;
+  width: 100px;
+  height: 100px;
+}
+
+.item11 {
+  background-color: lightgoldenrodyellow;
+  width: 100px;
+  height: 100px;
+}
+
+.item12 {
+  background-color: lightseagreen;
+  width: 100px;
+  height: 100px;
+}
+
+/* Flexbox container with column direction */
+.container4 {
+  background-color: #adb5bd;
+  width: 800px;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 50px;
+}
+
+.item13 {
+  background-color: lightgreen;
+  /* width: 100px; */
+  height: 100px;
+}
+
+.item14 {
+  background-color: lightcoral;
+  /* width: 100px; */
+  height: 100px;
+}
+
+.item15 {
+  background-color: lightgoldenrodyellow;
+  /* width: 100px; */
+  height: 100px;
+}
+
+.item16 {
+  background-color: lightseagreen;
+  /* width: 100px; */
+  height: 100px;
+}
+
+/* Flexbox container with wrapping enabled */
+.container5 {
+  background-color: #adb5bd;
+  width: 800px;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.item17 {
+  background-color: lightgreen;
+  width: 100px;
+  height: 100px;
+  border: 1px solid #000;
+}
+
+.item18 {
+  background-color: lightcoral;
+  width: 100px;
+  height: 100px;
+  border: 1px solid #000;
+}
+
+.item19 {
+  background-color: lightgoldenrodyellow;
+  width: 100px;
+  height: 100px;
+  border: 1px solid #000;
+}
+
+.item20 {
+  background-color: lightseagreen;
+  width: 100px;
+  height: 100px;
+  border: 1px solid #000;
+}
+
+.item21 {
+  background-color: lightgreen;
+  width: 100px;
+  height: 100px;
+  border: 1px solid #000;
+}
+
+.item22 {
+  background-color: lightcoral;
+  width: 100px;
+  height: 100px;
+  border: 1px solid #000;
+}
+
+.item23 {
+  background-color: lightgoldenrodyellow;
+  width: 100px;
+  height: 100px;
+  border: 1px solid #000;
+}
+
+.item24 {
+  background-color: lightseagreen;
+  width: 100px;
+  height: 100px;
+  border: 1px solid #000;
+}
+
+.item25 {
+  background-color: lightgreen;
+  width: 100px;
+  height: 100px;
+  border: 1px solid #000;
+}
+
+.item26 {
+  background-color: lightcoral;
+  width: 100px;
+  height: 100px;
+  border: 1px solid #000;
+}