Media Query Practice

I’m trying to enlarge the image I’m using when the screen reaches a maximum width of 600px. I thought my media query below would’ve worked but is adding no effect when screen reaches that size.

<style>
#center {
     display: block;
     margin: auto;
     width: 25%;
}
h2{
  position: relative;
  left: 15px;
}
body{
  background: linear-gradient(90deg, #004ff9, #fff94c);
}
@media (max-width: 600px) {
   img{
     width: 40%;
   }
}

</style>
<DOCTYPE html>
<head>
    <title> Yanzoz </title>
    <meta charset="utf-8">
</head>
<body>
<img src="../images/yanzoz-logo-remake.png" alt="Yanzoz" id="center">
<h2>Biography</h2>
</body>``

Try giving it min-width instead of max-width.

max-width means size up to this width

you were correct… I applied the min-width to the the class selector though and it worked, I’m now wondering why a regular width attribute did not …

Thank you…