Lightining component Canvas width based on screen width

There seems to be some confusion around this question. The question asks specifically how to increase modal width when the modal is opened by a lightning action button.

Some answers will work when the custom component creates the modal, like adding

.THIS.slds-modal__container{
 max-width: 70px !important;
 width:70px !important;
}

to the component style definition. But this does not work when the modal is opened by an action button (or apparently also not when the modal is created dynamically within the component)

Other snippets will only work when used with certain API versions (not current) like adding

<style>
 .slds-modal__container{
     max-width: 70rem !important;
     width:70% !important;
 }
</style>

directly to the component body

The method of forcing the style to be applied by loading the above as a static resource looks like it is working for actions, but my experience with css in static resources is that it makes your style tedious to update and maintain.

/* update Sept 8 2019 */

If you are developing a managed package you are best to stick with the static resource method directly above this edit. The method below works but I just had a package fail security review for no other reason than using this inline method. Details were 'improper load of css'. When queried the response from partner support was 'Although our technology allows for it, it's against the AppExchange security policies.'

/* end update */

There is a way that I have had success with when trying to control the width of the modal generated by an action button.

Lightning components support the <aura:html tag=""> tag. Looking at the tags supported we see that "style" is allowed. Putting this together with the solution above we can add

<!--  this tag sets modal width -->
<aura:html tag="style">
    .slds-modal__container {
     min-width: 90vw;
    }
</aura:html>      

to our component body to increase the modal width to 90% of the view width.

slds-box says:

Provides 1rem base padding and borders

You're getting some padding because you're using slds-box. Remove that, and you should have the full width available. As an aside, it is not necessary to specify width on a div, because it uses 100% by default.