Thiết kế website giá rẻ

Question

image of webpage

I am a newbie and tried to fit the texts in the grid but it’s either too small or not visible. I also tried to make a thin solid black border but the size of the border does not cover the whole grid cell .In ‘.unitgrid’ text inside the grid doesn’t fit and border is not visible.
html code:

</head>
<body>
    <div class="all">
    <nav>
        <div class="navbar">
            <div class="nav-logo">
                <div class="logo"></div>
            </div>

                <div class="nav-head ">
                    <h1>dstpp</h1>
                </div>
                
                <div class="nav-toggle">
                    translate 
                </div>
        </div>
    </nav>

    <div class="panel">
        <div class="panel-options">
            <a href="#">Home</a>
            <a href="#">e-service</a>
            <a href="#">corporate link</a>
            <a href="#">Plant link</a>
            <a href="#">Important links</a>
            <a href="#">Internet links</a>
            <a href="#">About us</a>
        </div>
    </div>
    <div class="sidegrid">
        <div class="sidegrid-item">1</div>
        <div class="sidegrid-item">2</div>
        <div class="sidegrid-item">3</div>
        <div class="sidegrid-item">4</div>
        <div class="sidegrid-item">5</div>
        <div class="sidegrid-item">6</div>
        <div class="sidegrid-item">7</div>
        <div class="sidegrid-item">8</div>
        <div class="sidegrid-item">9</div>
        <div class="sidegrid-item">10</div>
        <div class="sidegrid-item">11</div>
        <div class="sidegrid-item">12</div>
        <div class="sidegrid-item">13</div>
        <div class="sidegrid-item">14</div>
     </div>
<div class="main-unit-wrapper">
          <div class="maingrid">.</div>
          <div class="desc-row">.</div>
<div class="unit">
    <div class="unitgrid">
        <div class="unitgrid-item-1">1</div>
        <div class="unitgrid-item">unit-1</div>
        <div class="unitgrid-item">unit-2</div>
        <div class="unitgrid-item">unit-3</div>
        <div class="unitgrid-item">unit-4</div>
        <div class="unitgrid-item">unit-5</div>
        <div class="unitgrid-item">unit-6</div>
        <div class="unitgrid-item">unit-7</div>
        <div class="unitgrid-item">Total</div>
        <div class="unitgrid-item">10</div>
        <div class="unitgrid-item">11</div>
        <div class="unitgrid-item">12</div>
        <div class="unitgrid-item">13</div>
        <div class="unitgrid-item">14</div>
        <div class="unitgrid-item">15</div>
        <div class="unitgrid-item">16</div>
        <div class="unitgrid-item">17</div>
        <div class="unitgrid-item">18</div>
    </div>
</div>
</div>
<div class="right-container">.</div>
</div>

</body>
</html>

css code:

* {
    margin: 0;
    font-family: arial;
    border: border-box;
    background-color: rgb(225,241,253);
}

/* .all{
    height: 100vh;
    width: 100vw;
    background-color: rgb(225,241,253);
}  */

.navbar {
    display: flex;
    background-color: #f6f8fb;
    color: #0e0d0d;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.nav-logo {
    height: 50px;
    width: 110px;
}

.navbar .nav-head h1 {
    background-color: white !important;
    padding: 0;
    margin: 0;
    border: none;
}

.panel .panel-options a{
    background-color:  rgb(0,65,90);
}

.logo {
    background-image: url("amazon_logo.png");
    background-size: cover;
    background-color: #0e0d0d;
    height: 50px;
    width: 100%;
}

.nav-head {
    display: flex;
    justify-content: center;
    width: 420.13px;
    height: 40px;
    border-radius: 4px;
    font: 14px;
}

.panel {
    height: 30px;
    display: flex;
    color: white;
    background-color:rgb(0,65,90) ;
    justify-content: space-evenly;
    align-items: center;
    background-color: rgb(0,65,90);
}

.panel-all {
    font-size: 0.9rem;
    font-weight: 700;
}

.panel-options a{
    font-size: 0.9rem;
    display: inline;
    margin-left: 10px;
    text-decoration: none;
    background-color: rgb(0,65,90);
    color: white;
}


.sidegrid{
    width: 160px;
    height: 499px;
    background-color: rgb(225,241,253);
    padding-left: 100px;
    display: grid;
    grid-template-rows: 29px 29px 29px 29px 29px 29px;
    grid-template-columns: 29px 29px;
    row-gap: 51px;
    column-gap: 53px;
    transform: translate(0, 2.4%);
    
}


.sidegrid-item{
    width: 78px;
    height: 78px;
    background-color: white;
    border-radius: 4px;
}



/*.unit{
    height:100px;
    width: 600px;
    margin-left: 440px;
    background-color: white;
    left: 50%;
    top: calc(50% + 200px)
}*/

.unitgrid{
    height:50px;
    width: 600px;
    margin-left: 440px;
    background-color: white;
    left: 50%;
    transform: translate(-18%, -240%);
    top: calc(50% + 200px);
    display: grid;
    grid-template-columns: 20px 20px 20px 20px 20px 20px 20px 20px 20px;
    grid-template-rows: 20px 20px;
    align-items: center;
    justify-content: space-evenly;
    align-content: space-evenly;
    border: 1px solid black;
}

.unitgrid-item {
    height: 4px;
    width: 10px;
}

.maingrid{
    display: flex;
    height: 300px;
    width: 600px;
    background-color: white;
    position: absolute;
    left: 50%;   
    transform: translate(-50%, 0);
    top: 21%;
}

.right-container {
    height: 240px;
    width: 200px;
    background-color: white;
    position: absolute;
    left: 74.4%;
    top: 21%;
}

I tried adjusting the font size and border but it was too small and was not visible.

Thiết kế website giá rẻ

Danh mục

how can I fit the words inside the grid without it being too small with a proper border