Assuming you have a simple div you can use !important to override.

Beware of using important it should be used only as an last option because important overrides all property which you define.

!important : ignore subsequent rules, and any usual specificity issues, apply this rule!'

div#main_slider{
height: 471px !important;
visible: hidden;
border:1px solid black;
font-size: 24px !important;
	}

<div id="main_slider" > My Div </div>

Here is the another solution without using important choose only the id selector.

#main_slider{
   height: 471px;
   border:1px solid black;
   font-size: 24px;
	}

<div id="main_slider" class="rev_slider fullscreenbanner" data-version="5.1.1RC">My Div
</div>

As you said the id is already defined, you have the following options to resolve this –

• Use !important
• Use inline styling for the specific div
• Provide div another id & use this new id to override.

Inline Style

The link you posted to demonstrated a DIV that has inline styling. This is different from styling already being applied via other CSS styling and cannot be overwritten by ordinary styling rules

Example

#main_slider{
  height: 100vh;
  background: red; /* <-- won't override the inline style */
}

<div id="main_slider" 
  class="rev_slider fullscreenbanner" 
  data-version="5.1.1RC"
  style="background: yellow;">
</div>

Override Inline Styling

You have two options to apply styling to elements that have inline styling.

1. More Inline Styling

This can be accomplished in one of two ways; directly on the element or via a script. In the example a yellow background is applied directly to the element. More than likely, if you didn’t add the inline style in the first place, it was updated dynamically via a script. You can use a script to also update it as demonstrated in the example below.

Example

main_slider.style.backgroundColor = 'red';

#main_slider{
  height: 100vh;
}

<div id="main_slider" 
  class="rev_slider fullscreenbanner" 
  data-version="5.1.1RC"
  style="background: yellow;">
</div>

Notice the only difference was moving the CSS to JavaScript. In this case, the red overwrote the previously existing yellow.

2. Use !important

The !important flag gives it precedence over inline styling and specificity of non-!important styling; however, this method should be used as a last resort. The only way to later override the !important is with more of them (in addition to specificity).

#main_slider{
  height: 100vh;
  background: red !important;
}

<div id="main_slider" 
  class="rev_slider fullscreenbanner" 
  data-version="5.1.1RC"
  style="background: yellow;">
</div>

I want to edit my div with id but somewhere it won’t load because its already defined and I can not override it. Maybe you guys have idea what is going on here.

Here is the problem
I want to edit this div but height is already defined and seems like it won’t override..
what can be the problem?
https://gyazo.com/03c4e641ba55863f82177a37214d7516

div#main_slider{
  height: 471px;
  visible: hidden;
}

<div id="main_slider" class="rev_slider fullscreenbanner" data-version="5.1.1RC">
</div>