Aligning Texts in mobile and laptop view

Question

I want to align my texts to the center in laptop/desktop screen, and align same texts to the left in mobile screen
I tried this but it did not work, can anybody help me out?

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 Tools</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>

CSS

<style>
 @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>