DONT ADD ANYTHING HERE!

width: 10%;
max-width:100%
width: 100%;
max-width: 500px;
width: 80%;
max-width: 600px;

Code

HTML

<div class="class-one">
    <code>width: 10%;</code><br>
    <code>max-width:100%</code>
</div>
<div class="class-two">

    <code>width: 100%;</code> <br>
    <code>max-width: 500px;</code>

</div>
<div class="class-three">
    <code>width: 80%;</code> <br>
    <code>max-width: 600px;</code>
</div>

CSS

.class-one,
.class-two,
.class-three {
    height: 8vw;
    text-align: left;
    padding-left: 40%;
    padding-top: 1em;
    padding-bottom: 1em;
}

.class-one {
    background-color: red;
    width: 10%;
    width: 100%;
    color: white;
}

.class-two {
    background-color: yellow;
    width: 100%;
    max-width: 500px;
}

.class-three {
    background-color: blue;
    max-width: 600px;
    color: white;
}

References