stylesheet from town
        .items {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            padding: 60px 40px;
            grid-column-gap: 40px;
            ;
            grid-row-gap:  60px;
            ;
        }
    
        .item img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            cursor: pointer;
            transition: 0.2s ease;
        }
    
        .item img:hover {
            transform: scale(1.04);
        }
    
        .item h4 {
            padding: 10px;
            text-align: center;
        }
    
        .item button {
            padding: 10px 60px;
            border: none;
            outline: none;
            background-color: #be1e2d;
            color: #d7e4c2;
            cursor: pointer;
            border-radius: 6px;
            font-size: 80px;
            display: block;
            margin: 0 auto;
            transition: 0.2s all;
        }
    
        .item button:hover {
            transform: scale(1.04);
        }
    
        @media screen and (max-width:546px) {
            .items {
                grid-template-columns: repeat(1, 1fr);
            }
        }

Index from -town
    <style>
        body {
            background-size: cover;
            background: url(images/TOWN-VISUAL\ SITEMAP-JERKINS\ FINISHED\ copy.jpg);
            background-position: center center;
            position: relative;
            height: 100vh;
        }

        .box {
            width: 900px;
            float: right;
            border: 1px solid black;
        }

        .box ul li {
            width: 120px;
            float: left;
            font-family: Majesti Banner Heavy;
            font-size: large;
            margin: 10px auto;
            text-align: center;
        }

        .box ul li a {
            text-decoration-color: white;
            color: #f04e23;
        }

        .box ul li:hover {
            background-color: #8a8c8f;
        }

        .box ul li a:hover {
            color: #000;
        }

        .wd {
            width: 300px;
            height: 539px;
            background-color: #41393d;
            opacity: 0.9;
            padding: 55px;
        }

        .wd header {
            text-align: justify;
            padding-left: 50px;
            padding-right: 50px;
            margin: middle;
        }

        .wd h1 {
            text-align: center;
            text-transform: capitalize;
            font-family: majesti_banner_heavy_italic;
            font-size: 48px;
            color: black;
        }

        .wd h3 {
            text-align: justify;
            color: #d7e1c2;
            font-family: Majesti Banner Medium;
            font-size: medium;
            font-weight: normal;
        }

        .wd h2 {
            text-align: center;
            text-transform: capitalize;
            font-family: Majesti Banner Book Italic;
            font-size: xx-large;
            font-weight: normal;
            margin: 40px auto;
        }

        .opt form,
        input[type="button"] {
            background-color: #41393d;
            color: #8a8c8f;
            font-family: Majesti Banner Book;
            font-size: x-large;
            padding: 10px;
            margin: -14px auto;
            padding-left: 50px;
            padding-right: 50px;
            text-align: center;
        }

        form,
        input[type="button"]:hover {
            background-color: #d4a18d;
        }

        @font-face {
            font-family: 'majesti_banner_bold';
            src: url(Majesti-Banner-Bold.otf);
        }
    </style>

<div class="wd">
        <h1>Welcome!</h1>

        <h3>To bring quality, style, and the wish for good fortune to all of our guests. We provide a high-end
            experience through Chinese cuisine.</h4>

            <h2> Reservation</h2>

            <div class="opt">
                <form action="" method="post">
                    <input type="button" value="Start Now">
                </form>
            </div>