I am now doing a project about responsive website design. Here is my code.

See more:

CSS

HTML

web

responsive

.banner{
        position:relative;
        display: block;
        margin: auto;
        width:75%;
        top:23px;
           
    }
    #Username{
        position:relative;
        display: inline-block;
        width:auto;
        float:right;
        text-size-adjust: auto;
        padding-left: 5px;
        padding-right: 5px;
        min-width:auto;
        font-size : 100%;
        
    }
    #class1{
        
        position:relative;
        display:inline-block;
        margin:auto;
        top:68px;
        width:20%;
        float:left;
        padding-left:5px;
        padding-right:5px;
    }
    #class2{
        position:relative;
        display: inline-block;
        margin:auto;
        padding-left:5px;
        padding-right:5px;
        top:68px;
        width:20%;
        float:right;
    }
            /* for 1024px or less */
@media screen and (max-width: 1024px) {

	.banner{
		width: 94%;
	}
	#Username{
		width: 15%;
        top:40px;
	}
	#class1{
		width: 30%;
        top:100px;
	}
    #class2{
		width: 30%;
        top:100px;
	}
}
     /* for 736px or less */
@media screen and (max-width:736px) {

	.banner {
		width: 80%;
		float: center;
	}
	#Username {
		width:30%;
        top:30px;
		float: right;
	}
    #class1{
		width: auto;
        top:100px;
        float:left;
	}
    #class2{
		width: auto;
        top:100px;
        float:right ;
        left:30%;
	}
    
}

What I have tried:

I have followed some tutorials on the Internet but I just still don't know how to make all my things on the website change when screen size changes. When I narrow the screen, it runs successfully at the beginning, but failed in the end. How can I improve my code?