Media query does not resizing fieldset and button - html

Question

I'm trying to use media querys, but I have a problem. When I resized my window, it doesn't do anything when I resize the window, I try with different options, for example:
I have this:
#media all and (max-width: 900px) {
#breakdown-search-clear-button {
margin-left: 28% !important;
}
#historico-incidencias{
width: 36.1% !important;
margin-left: 62% !important;
margin-top: -27.8% !important;
}
}
or this
#media screen and (max-width: 900px) {
#breakdown-search-clear-button {
margin-left: 28% !important;
}
#historico-incidencias{
width: 36.1% !important;
margin-left: 62% !important;
margin-top: -27.8% !important;
}
}
at the end of my css file. And it doesn't work. I try first with "#media screen" and then with "#media all", but it doesn't work in both cases when I resize the window.
Then I try to put tag on my .jso file, as you can see on this example:
I write this tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
And, at the end of the tag I write this:
<style>
/* On screens that are 600px wide or less, the background color is olive */
#media screen and (max-width: 900px) {
#breakdown-search-clear-button {
margin-left: 28% !important;
}
#historico-incidencias{
width: 36.1% !important;
margin-left: 62% !important;
margin-top: -27.8% !important;
}
}
</style>
But it doesn't do anything when I resize the window as on the css file.
HTML elements:
<div id="breakdown-search-clear-button" class="roundedButtonMin roundedButtonRight deleteBG" style="margin-left: 24% !important; margin-top: 1% !important;"></div>
<fieldset style="width: 46.1%; margin-left: 52%; margin-top: -23%; display: inline-block; vertical-align: top;" id="historico-incidencias">
<legend>Histórico</legend>
<div id="listHistoricalIncidences"></div>
</fieldset>
Anyone can help me, please?
Thank you!