Сейчас я занимаюсь проектом по адаптивному дизайну сайтов. Вот мой код.

---

.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%;
	}
    
}

Что я уже пробовал:

Я следил за некоторыми учебниками в интернете, но я просто до сих пор не знаю, как сделать все мои вещи на веб-сайте изменяются при изменении размера экрана. Когда я сужаю экран, он успешно запускается в начале, но в конце терпит неудачу. Как я могу улучшить свой код?

---