Align text inside HTML DIV on Mobile and Desktop view using CSS and media query

I want to align my texts to the center in laptop and desktop view, but in mobile view I want the texts to align to the left

I tried with this but it did not work. How can this be achieved please?

Here is my HTML and CSS

 CSS

<style type="text/css">
    @media (min-width:320px) {
        #header-write {
            text-align: left;
        }

        #boldhead {
            text-align: left;
        }
    }

    @media (min-width:481px) {
        #header-write {
            text-align: left;
        }

        #boldhead {
            text-align: left;
        }
    }

    @media screen and (min-width: 360px) and (max-width:640px) {
        #header-write {
            text-align: center;
        }
    }
</style>

HTML

<div class="container" id="header-write" style="margin-top: 3%; padding: 10px; margin-top: 9%;">
    <span style="color: #ff8d01; font-family: 'Museo Sans Rounded 900', sans-serif; font-size: 8.9vmin; top: 9%; top: 9%; font-weight: 900;">Modern Machines</span>
    <span style="color: #eeeeee; font-family: 'Museo Sans Rounded 900', sans-serif; font-size: 8.9vmin; top: 9%; font-weight: 900;">&nbsp;for the Best Designers in town</span>
    <br />
    <br />
    <p id="boldhead" style="top: 6%; color: #eeeeee;">Design, Sew, and mend with our sophisticated machines </p>
</div>