html - Something is blocking me from overwriting css -

on page http://project.dreamo.ee/lennumaa/wordpress/ :

the bottom-left tawk.to chat bar's width auto; reason. want 320px.

i have tried !important in every css file(#tawkchat-minified-container{width: 320px !important}), custom css plugins, made sure plugin appearance on tawk.to site has width of 320px, still has width:auto reason.

when edit width on google debugger, works, need stay that...

the funny part is, 320px, , goes full width. not changing in meantime.

it seems weird me , cant figure out whats problem behind this.

thanks in advance!!

apply width parent iframe if cannot edit iframe's css itself.

#tawkchat-minified-iframe-element {    width: 320px !important; } 

or edit html directly since css written inline:

<iframe id="tawkchat-minified-iframe-element" src="about:blank" frameborder="0" scrolling="no" class="" style="width: 320px;max-width: 100%;outline: none !important;visibility: visible !important;resize: none !important;box-shadow: none !important;overflow: visible !important;opacity: 1 !important;position: fixed !important;border: 0px !important;padding: 0px !important;transition-property: none !important;z-index: 1000001 !important;cursor: auto !important;float: none !important;height: 40px !important;min-height: 40px !important;max-height: 40px !important;min-width: 320px !important;transform: rotate(0deg) translatez(0px) !important;transform-origin: 0px center 0px !important;margin: 0px !important;top: auto !important;bottom: 0px !important;left: 10px !important;right: auto !important;display: block !important;background: none transparent !important;"></iframe> 

#tawkchat-minified-container not relevant because inside iframe, not inherit general css/js codes of wordpress theme.

p.s there lot of unnecessary code here, try cleaning up.