Boxes are not well placed in the given layout - Ludo (html,css)

html {  box-sizing: border-box;  padding: 0;  margin: 0;}* {  box-sizing: border-box;  padding: 0;  margin: 0;}body {  height: 985px;  /* font-size: 9.85rem; */  /* height:150vh; */}.container {  margin: 0 30%;  border-collapse: collapse;  /* padding: auto; */  /* border: 2px solid green; */  display: flex;}.first-box {  /* border: 2px solid red; */  width: 38%;  /* height: 33.3%; */  /* height: 30vh; */  background-color: lime;  /* position: relative;    z-index: 1; */  display: flex;}.box-1-parent {  display: flex;  /* justify-content:space-around; */  flex-wrap: wrap;  flex-direction: column;  margin: auto;  /* margin: ; */  width: 60%;  /* left: 18%; */  height: 60%;  background-color: white;  /* position:relative; */  border: 2px solid white;}.box-1 {  /* padding: ;     */  background-color: lime;  width: 33%;  margin: auto;  height: 34%;  /* align-items: ; */  /* border: 2px solid black; */  /* margin: auto ; */}.sec-box {  /* width: 7.5vw; */  width: 19%;  height: 30vh;  /* height: 197.1px; */  display: flex;  flex-direction: column;  flex-wrap: wrap;  margin: 0;  border-collapse: collapse;}.smallbox {  width: 34.5%;  /* width: 2.5vw; */  height: 5vh;  border: 1px solid black;  border-collapse: collapse;}.third-box {  width: 38%;  /* width: 15vw; */  height: 30vh;  background-color: yellow;  /* position: relative;    z-index: 1; */  display: flex;}.box-3-parent {  display: flex;  /* justify-content:space-around; */  flex-wrap: wrap;  flex-direction: column;  margin: auto;  /* margin: ; */  width: 60%;  /* left: 18%; */  height: 60%;  background-color: white;  /* position:relative; */  border: 2px solid white;}.box-3 {  background-color: yellow;  width: 33%;  margin: auto;  height: 34%;}.second-box {  width: 38%;  /* width: 15vw; */  height: 30vh;  background-color: red;  /* position: relative;    z-index: 1; */  display: flex;}.box-2-parent {  display: flex;  /* justify-content:space-around; */  flex-wrap: wrap;  flex-direction: column;  margin: auto;  /* margin: ; */  width: 60%;  /* left: 18%; */  height: 60%;  background-color: white;  /* position:relative; */  border: 2px solid white;}.box-2 {  background-color: red;  width: 33%;  margin: auto;  height: 34%;}.forth-box {  width: 38%;  /* width: 15vw; */  height: 30vh;  background-color: aqua;  /* position: relative;    z-index: 1; */  display: flex;}.box-4-parent {  display: flex;  /* justify-content:space-around; */  flex-wrap: wrap;  flex-direction: column;  margin: auto;  /* margin: ; */  width: 60%;  /* left: 18%; */  height: 60%;  background-color: white;  /* position:relative; */  border: 2px solid white;}.box-4 {  background-color: aqua;  width: 33%;  margin: auto;  height: 34%;}.mid-box {  /* width: 100%; */  /* height: 38%; */  height: 15vh;  display: flex;  flex-direction: column;  flex-wrap: wrap;  /* margin: 0; */  /* border-collapse:collapse; */}.win-area {  font-size: 3.7vh;  /* height: 15vh;    width: 7.5vw; */  border-color: yellow aqua red lime;  border-style: solid;  border-width: 1em 1em 1em 1em;  height: 0px;  width: 0px;}h1 {  margin: 3%;  color: blueviolet;  text-decoration: underline blueviolet wavy 5px;}.line-top {  background-color: yellow;}.line-mid {  background-color: lime;}.line-mid-rgt {  background-color: aqua;}.line-down {  background-color: red;}.github {  /* display: inline-block; */  width: 100px;  /* margin: auto; */}.main {  width: 100%;  margin: auto;  text-align: center;}/* Other way to make border triangle *//*.contain-triangles {height: 100%;width: 100%;position: relative;}.triangle-right {width: 0;height: 0;border-top: 45px solid transparent;border-left: 45px solid lime;border-bottom: 45px solid transparent;position: absolute;left: 0;top: 5.2px;} .triangle-up {width: 0;height: 0;border-left: 45px solid transparent;border-right: 45px solid transparent;border-bottom: 45px solid red;position: absolute;bottom: 0;left: 5.2px;}.triangle-left {width: 0;height: 0;border-right: 45px solid aqua;border-bottom: 45px solid transparent;border-top: 45px solid transparent;position: absolute;right: 0;top: 5.2px;}.triangle-down {width: 0;height: 0;border-left: 45px solid transparent;border-right: 45px solid transparent;border-top: 45px solid yellow;position: absolute;top: 0;right: 5.2px;}*/

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="ludocss.css"></head><div class="main"><h1>Let's Play Ludo </h1></div><div class="container"><div class="first-box"><div class="box-1-parent"><div class="box-1"></div><div class="box-1"></div><div class="box-1"></div><div class="box-1"></div><!-- <div class="box-1"></div><div class="box-1"></div> --></div></div><div class="sec-box"><div class="smallbox"></div><div class="smallbox"></div><div class="smallbox"></div><div class="smallbox"></div><div class="smallbox"></div><div class="smallbox"></div><div class="smallbox"></div><div class="smallbox line-top"></div><div class="smallbox line-top"></div><div class="smallbox line-top"></div><div class="smallbox line-top"></div><div class="smallbox line-top"></div><div class="smallbox"></div><div class="smallbox line-top"></div><div class="smallbox"></div><div class="smallbox"></div><div class="smallbox"></div><div class="smallbox"></div></div><div class="third-box"><div class="box-3-parent"><div class="box-3"></div><div class="box-3"></div><div class="box-3"></div><div class="box-3"></div><!-- <div class="box-1"></div><div class="box-1"></div> --></div></div></div><div class="container"><div class="mid-box-parent"></div><div class="mid-box"><div class="smallbox smallbox-1"></div><div class="smallbox smallbox-1"></div><div class="smallbox smallbox-1"></div><div class="smallbox smallbox-1 line-mid"></div><div class="smallbox smallbox-1 line-mid"></div><div class="smallbox smallbox-1"></div><div class="smallbox smallbox-1"></div><div class="smallbox smallbox-1 line-mid"></div><div class="smallbox smallbox-1"></div><div class="smallbox smallbox-1"></div><div class="smallbox smallbox-1 line-mid"></div><div class="smallbox smallbox-1"></div><div class="smallbox smallbox-1"></div><div class="smallbox smallbox-1 line-mid"></div><div class="smallbox smallbox-1"></div><div class="smallbox smallbox-1"></div><div class="smallbox smallbox-1 line-mid"></div><div class="smallbox smallbox-1"></div><div class="win-area"><!-- <div class="row2-col2"> --><!-- add triangular effect using html and css --><div class="contain-triangles"><div class="triangle-right"></div><div class="triangle-up"></div><div class="triangle-left"></div><div class="triangle-down"></div></div><!-- </div> --></div><!-- <div class="smallbox" id="box-19"></div><div class="smallbox" id="box-20"></div><div class="smallbox" id="box-21"></div><div class="smallbox" id="box-22"></div><div class="smallbox" id="box-23"></div><div class="smallbox" id="box-24"></div><div class="smallbox" id="box-25"></div><div class="smallbox" id="box-26"></div><div class="smallbox" id="box-27"></div> --><div class="smallbox smallbox-1"></div><div class="smallbox smallbox-1 line-mid-rgt"></div><div class="smallbox smallbox-1"></div><div class="smallbox smallbox-1"></div><div class="smallbox smallbox-1 line-mid-rgt"></div><div class="smallbox smallbox-1"></div><div class="smallbox smallbox-1"></div><div class="smallbox smallbox-1 line-mid-rgt"></div><div class="smallbox smallbox-1"></div><div class="smallbox smallbox-1"></div><div class="smallbox smallbox-1 line-mid-rgt"></div><div class="smallbox smallbox-1"></div><div class="smallbox smallbox-1"></div><div class="smallbox smallbox-1 line-mid-rgt"></div><div class="smallbox smallbox-1 line-mid-rgt"></div><div class="smallbox smallbox-1"></div><div class="smallbox smallbox-1"></div><div class="smallbox smallbox-1"></div></div></div><div class="container"><div class="second-box"><div class="box-2-parent"><div class="box-2"></div><div class="box-2"></div><div class="box-2"></div><div class="box-2"></div><!-- <div class="box-1"></div><div class="box-1"></div> --></div></div><div class="sec-box"><div class="smallbox"></div><div class="smallbox"></div><div class="smallbox"></div><div class="smallbox"></div><div class="smallbox line-down"></div><div class="smallbox"></div><div class="smallbox line-down"></div><div class="smallbox line-down"></div><div class="smallbox line-down"></div><div class="smallbox line-down"></div><div class="smallbox line-down"></div><div class="smallbox"></div><div class="smallbox"></div><div class="smallbox"></div><div class="smallbox"></div><div class="smallbox"></div><div class="smallbox"></div><div class="smallbox"></div></div><div class="forth-box"><div class="box-4-parent"><div class="box-4"></div><div class="box-4"></div><div class="box-4"></div><div class="box-4"></div><!-- <div class="box-1"></div><div class="box-1"></div> --></div></div></div><script>  const width = window.innerWidth;  const height = window.innerHeight;  console.log(`The viewport's width is ${width} and the height is ${height}`);</script></body></html>