Favourite characters page

<!DOCTYPE html>
<html>
    <head>
    <title>{Title}</title>
    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">

        <style>
        body{
            background-color:black; /*page background color*/
            font-family: 'Raleway', sans-serif;
        }

        .container{
            position:relative;
            left:345px;
            top:100px;
            width:800px;
            height:500px;
            background-color:pink;/*container background color*/
        }

        .navigation{
            background-color:white;/*navigation background color*/

        }

        .navigation li{
            list-style-type:none;
            display:block;
            color:black;
            text-align:center;
            padding:0px 55px 0px 0px;
        }

        .navigation li a{
            color:black; /*home link color*/
            text-decoration:none;
            text-align:center;
            transition: 0.5s ease;
        }


        .navigation a:hover{
            color:white; /*home link hover color*/
        }

    .page{
        position:relative;
        top:4px;
        left:26px;
        background-color:white; /*page color*/
        width:750px;
        height:440px;
        overflow:scroll;
        overflow-x:hidden;
    }

    .description{
        border-style:solid;
        border-width: 1px;
        border-color:black; /*description border color*/
        width:300px;
        margin-top:10px;
        margin-left:215px;
        background-color:white; /*description background color*/

    }

    .description p{
        color:black; /*description text color*/
        text-align:center;
        padding:10px;
    }

    .section h1{
        text-align:center;
        font-size:20px;
        background-color:#F5F5F5;
        width:200px;
        margin-top:40px;
        margin-left:265px;
        text-transform:capitalize;
    }

    .items{
        -webkit-column-count:3;
        -moz-column-count: 3;
        column-count:3;
        -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
        -moz-column-gap: 40px; /* Firefox */
        column-gap: 40px;
    }


    .character img{
        width:120px;
        height:120px;
        margin-left:40px;
        margin-top:15px;
        margin-bottom:20px;
        padding:5px;

    }


    .name{
        background-color:#F5F5F5; /*name background color*/
        width:120px;
        text-align:center;
        margin-left:45px;
        margin-top:-20px;
        text-transform:capitalize;
    }

.page::-webkit-scrollbar-thumb:vertical {
        background-color:black; /*scrollbar's slider color*/
        background-image:url('URL HERE'); /*optional background image*/
        height:100px;
        -moz-border-radius: 15px; /*these make bar rounded*/
        border-radius: 15px;
    }


.page::-webkit-scrollbar {
        height:10px;
        width:5px; /*width of slider*/
        background-color:#eeeeee; /*scrollbar's main color*/
        background-image:url('URL HERE'); /*optional background image*/
    }


        </style>
    </head>

    <body>
        <div class="container">
            <div class="navigation">
                <ul>
                    <li><a href="/">Home</a></li>
                </ul>
            </div>
        <div class="page">
                <div class="description">
                    <p>This is the description of the page.</p>
                            </p>
                    </div>

        <div class="section">
            <h1>Category</h1>
                <div class="items">


     <div class="row">

<div class="character">
<a href="/tagged/"><img src=""></a>
<div class="name">Name</div>
</div>
<div class="character">
<a href="/tagged/"><img src=""></a>
<div class="name">Name</div>
</div>
<div class="character">
<a href="/tagged/"><img src=""></a>
<div class="name">Name</div>
</div>
</div>

</div>
</div>

</div>
</div>

</body>

<!-- for new section copy from here

<div class="section">
<h1>Title</h1>
<div class="items">

<div class="row">

<div class="character">
<a href="/tagged/"><img src=""></a>
<div class="name">Name</div>
</div>

<div class="character">
<a href="/tagged/"><img src=""></a>
<div class="name">Name</div>
</div>


<div class="character">
<a href="/tagged/"><img src=""></a>
<div class="name">Name</div>
</div>
</div>
</div>
</div>

            to here-->