css媒体最大和最小宽度

Question

I have 2 div tags, which I want to show only one of them depending on the screen size,

but for a specific screen size (in my case 699px) both of them are shown and I can't understand why.

Anyone know why?

More specific, I don't understand why the second div is shown on screen size of 699px.

Further more, if I change the max-width to 698px the second div is not shown for screen size of 698px.

Any ideas why?

In case it matters, my project is build with React v17

html:

<div class='first'>first</div>
<div class='second'>second</div>

css:

@media (min-width: 700px) {
  .first {
    display: none;
  }
}

@media (max-width: 699px) {
  .second{
    display: none;
  }
}

==================== Edit

Regarding the answer of @Imran Rafique

Answer 1

Here you go

 .first, .second { width: 100%; background-color: red; height: 100vh; } @media (min-width: 700px) { .first { display: none; } } @media (max-width: 699px) { .second{ display: none; } }

 <div class='first'><h1>first</h1></div> <div class='second'><h1>Second</h1></div>