layout de noticias + php com paginação

https://img001.prntscr.com/file/img001/cxcrnjsLTq6DlR3HDjZPBg.png

layout noticias

<?php
    include('converte_data.php');
?>

<html>
<head>
    <title>Pagination</title>
    <!-- Bootstrap CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="topo">
        Site
    </div>
<div class="container">
    <div class="quebralinha"></div>

    <!--<div class="centraliza-conteudo">-->
    <?php

        if (isset($_GET['pageno'])) {
            $pageno = $_GET['pageno'];
        } else {
            $pageno = 1;
        }
        $no_of_records_per_page = 2;
        $offset = ($pageno-1) * $no_of_records_per_page;

        $conn=mysqli_connect("localhost","root","","artigos");
        // Check connection
        if (mysqli_connect_errno()){
            echo "Failed to connect to MySQL: " . mysqli_connect_error();
            die();
        }

        $total_pages_sql = "SELECT COUNT(*) FROM tb_artigos";
        $result = mysqli_query($conn,$total_pages_sql);
        $total_rows = mysqli_fetch_array($result)[0];
        $total_pages = ceil($total_rows / $no_of_records_per_page);

        $sql = "SELECT * FROM tb_artigos LIMIT $offset, $no_of_records_per_page";
        $res_data = mysqli_query($conn,$sql);
        while($row = mysqli_fetch_array($res_data)){  ?>

        <div class="row">

            <div class="col-sm-4">
                <!--<?php echo converte_data($row['data']); ?><br> -->
                <?php echo "".$row["assunto"]?><br>
                <!--<img src="imagens/<?php echo $row["imagem"]; ?>" width="260" heigh="200" class="img-fluid">-->
                <img src="imagens/<?php echo $row["imagem"]; ?>" width="100%" class="img-fluid">
            </div>

            <div class="col-sm-8">
                <div class="titulo">
                    <?php echo "".$row["titulo"]?><br>
                </div>
                <?php echo "".$row["linha_fina"]?>
            </div>
        </div><hr>


    <?php
        }
        mysqli_close($conn);
    ?>
    <!--</div>-->


    <div class="centraliza-conteudo">
        <ul class="pagination">
            <li><a href="?pageno=1">Primeira</a></li>
            <li class="<?php if($pageno <= 1){ echo 'disabled'; } ?>">
                <a href="<?php if($pageno <= 1){ echo '#'; } else { echo "?pageno=".($pageno - 1); } ?>">Anterior</a>
            </li>
            <li class="<?php if($pageno >= $total_pages){ echo 'disabled'; } ?>">
                <a href="<?php if($pageno >= $total_pages){ echo '#'; } else { echo "?pageno=".($pageno + 1); } ?>">Próxima</a>
            </li>
            <li><a href="?pageno=<?php echo $total_pages; ?>">Última</a></li>
        </ul>
    </div>

    </div>

    <div class="rodape-site">
        2023, site de conteúdo. Todos os direitos reservados.
    </div>

</body>
</html>


css:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }

    a{
    color: rgb(19, 2, 2);
    text-decoration: none;
    }

    a:hover {
    text-decoration: underline;
    }

    p{
    text-align: justify;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 20px;
    }

    .titulo{
    text-align: justify;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 25px;
    font-weight: bold;

    }

    .topo{
    background-color: rgb(21, 88, 151);
    padding-left: 30px;
    padding-top: 20px;
    padding-bottom: 20px;
    color: rgb(255, 255, 255);
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 50px;
    }

    .descricao{
        font-size: 13px;
    }

    .barra-menu{
        font-size: 18px;
        padding-top: 5px;
        padding-bottom: 20px;
    }

    .centraliza-conteudo{
        text-align: center;
    }

    .rodape{
        background-color: rgb(214, 214, 214);

        color: rgb(0, 0, 0);
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-size: 15px;

    }


    .rodape-site{
        /* background-color: #cecece; */
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 80px;
        background-color:rgb(247,247,247);
        text-align: left;
        /*8border: solid 1px Gray;*/
        font-size:13pt;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        /*font-weight:bold;*/
        width:100%;
        color:Black;
        position:relative;
        bottom:0px;
        left:0px;
}


    .img-fluid{
        max-width:100%;
        height:auto;
    }


    .quebralinha{
        padding-top: 100px;
    }