I am trying to build a basic website with CSS and HTML. I have right now adjusted the code in the following file to shrink the images down to displayable size. But let's suppose i tried decreasing the width of my browser(i am using my laptop) the contents get reorganized and the text moves below the picture as expected. But the problem i am unable to scroll down. I have tried various solutions like setting overflow of html to scroll, setting overflow-x property to hidden in html.

```
<!DOCTYPE html>
<html>
<head>
    <script data-ad-client="ca-pub-7652187840778484" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <title>
        W3Coders
    </title>
    <link rel="stylesheet" href="better-style.css">
</head>
<body>
    <div class = "topping">
        <h1 style="float: left;color: rgb(58, 118, 209);">W3Coders</h1>
        <h1 style="float: left;margin-left: 870px;color: rgb(58, 118, 209);">Definitely not world's most visited site</h1>
        <img src="images/w3image.png" alt="The Logo" style="float: right; height: 68px;">
    </div>
    <div class="navbar">
        <a href="index.html" class="active">Home</a>
        <a href="resources.html">Resources</a>
        <a href="skills.html">Skills</a>
        <a href="rate.html">Rate</a>
        <a href="contact.html">Contact</a>
    </div>
    <div class="contents">
        <img src="images/wwwimage.jpg" alt="Just a picture" style="height: 97%;float: left;">
        <h1>Purpose Of Existence</h1>
        <h4>W3Coders was created for the sole purpose of <s>helping people </s>showcasing my web development skills</h4>
        <h4>It was at this moment i ran out of content to put here. Contact me if you have an idea on what i should do with all the empty space</h4>
        <h1>Random stuff cuz i have idea what do with space:</h1>
        <h4>"Any programmer can write code a computer can understand. It takes skills to write code a person can understand."</h4>
    </div>
</body>

```

Here is my CSS file: 

```
.topping
    background-color: white;
    width: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    height: 9%;
    color: rgb(92, 84, 84);
    padding: 0%;
}
.navbar{
    background-color: rgb(92,84,84);
    overflow: hidden;
    width: 100%;
    height: 6%;
    position:fixed;
    top:68px;
    left:0px;
}
.people{
    background-color: rgb(58,118,209);
    overflow: hidden;
    width: 100%;
    position: relative;
    top: 0px;
    left: 0px;
}
.navbar a{
    float:left;
    color: white;
    padding:14px 26px;
    text-decoration: none;
    text-align: center;
    font-size: 17px;
}
.people a{
    float:left;
    color: white;
    padding: 14px 26px;
    text-decoration: none;
    text-align: center;
    font-size: 15px;
}
.navbar a.active{
    color: white;
    background-color: rgb(58,118,209);
}
.people a.active{
    background-color:black;
    color: white;
}
.navbar a:hover{
    color: white;
    background-color: cyan;
}
.people a:hover{
    color:white;
    background-color: rgb(92, 84, 84);
}
.contents{
    background:url("images/background.jpg");
    width: 100%;
    position: fixed;
    left: 0px;
    top: 15%;
    height: 85%;
}
.card{
    background-color: white;
    width: fit-content;
    color: black;
    padding: 20px;
    margin: 10px;
    border-radius: 5px;
    border-width: 10px;
    float: left;
    border-color: black;
    box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.2);
}
h2 .card{
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5);
}
a img:hover{
    border-radius: 10px;
    border-width: 3px;
    border-color: grey;
    border-style: solid;
    animation-name: links;
    animation-duration: 3s;
    animation-fill-mode: forwards;
}
@keyframes links{
    0%{
        border-color: grey;
    }
    25%{
        border-color: red;
    }
    50%{
        border-color: green;
    }
    100%{
        border-color:blue;
    }
}

```

I am using github pages to host my site: <https://godofgames0070.github.io>
Also, i am using Google Chrome to view my site.