Semantic UI: adjusting width style of ui container-CodePudding

I would like to edit the styling of ui main container class in Semantic UI. Currently, we have:

<div class="ui main container"></div>

However, I want the following style to be applied:

<div class="ui main container" style="width:1825px"></div>

I have tried the following CSS selector:

<style>
  .ui.main.container {
      width: 1825px;
  }
</style>

However, this does not affect the styling of the div as expected. I tried moving the location of the <style> tag, and trying different css selector combinations but to no avail. Is there any reason the style is not being overridden? How can I imitate the effect of the inline style (which actually gets applied)?

CodePudding user response：

Try adding !important to override the style. Like shown below

.ui.main.container {
  width: 1825px !important;
}