How to left-align text in a centered context

Question

I can guess that I am missing something in here. Still can't left-align text in a centered div

here is a mimic sample of my final work:

<div class="grid-row">
        <img src="http://www.fununlimitedsports.com/wp-content/images/istockSUP.jpg" />
        <div class="profile-info">
            <div class="name"><a href="#">STUDENT NAME '14</a></div>
            <div class="occupation">Toured nationally with “West Side Story”</div>
            <div class="major">MAJOR: MUSIC THEATRE</div>
        </div>
    </div>

css:

 .grid-row {
        max-width: 980px;
        margin: 0 auto;
        position: relative;
        border: 1px solid green;
        text-align:center;
    }

How to keep the profile-info div centered inside the grid-row and maintain a left-aligned text at the same time for it's content?

fiddle

the image used is a random img from google

Edit: I need the div profile-info to still be in the middle of the grid-row and to left-align its text

Answer 1

.grid-row {
    max-width: 980px;
    margin: 0 auto;
    position: relative;
    border: 1px solid green;
    text-align:center;
}

.profile-info {
    border:1px solid gray;
    margin:0 auto;
    text-align:left;
    width:200px;
}

<div clas="grid-row">
  <div class="profile-info">
    info
  </div>
</div>

I've edited your fiddle.