НЕ срабатывает адаптив html + css

@media screen and (max-width: 540px) {
.robo {
    padding-top: 16%;
}

.main-title {
    text-align: center;
    width: 100%;
    height: 100%;
    margin-top: 18%;
}

. main-text {
    text-align: center;
    width: 100%;
    height: 100%;
    margin-top: 35%;
}
}

<section class="main-content">
    <div class="create-main">
        <div class="create">
             <img src="images/robo.png" alt="robo" class="robo">
                <div class="main-info">
                    <h1 class="main-title">Create your own exchange in two clicks</h1>
                    <p class="main-text">Convenient and secure crypto solutions for your business all in one place.</p>
                </div>
            </div>
      </div>
</section>