Align Elements Left Within Centered Div Container

Question

I am looking to align my elements to the left within a centered div container. The issue I am finding is that I used text-align to center the overall div, but when I try to create another content container and text-align left it isn't lining up my content to the left within the centered div.

HTML:

<div id="bar-fields">
        <h1><u>Bar Information</u></h1>
          <label>Logo:</label>
              <input type="button" value="upload">
            <br />
              Business Name: <%= f.text_field :name, required: true %>
            <br />
            <div id="bar-description-field">
              <label>Description:</label> <%= f.text_area :description %>
            </div>
            <br />
              Zip: <%= f.text_field :zip %>
            <br />
              <label>State:</label>
              <select>
                <option value="State">State</option>
              </select>
            <br />
            <label>Region:</label> 
              <select>
                <option>All</option>
              </select>
            <br />
              Phone: <%= f.text_field :phone %>
            <br />
              Facebook:  <%= f.text_field :facebook %>
            <br />
              Twitter:  <%= f.text_field :twitter %>
            <br />
              Monday Specials:  <%= f.text_field :mon_special %>
            <br />
              Tuesday Specials:  <%= f.text_field :tue_special %>
            <br />
              Wednesday Specials:  <%= f.text_field :wed_special %>
            <br />
              Thursday Specials:  <%= f.text_field :thu_special %>
            <br />
              Friday Specials:  <%= f.text_field :fri_special %>
            <br />
              Saturday Specials:  <%= f.text_field :sat_special %>
            <br />
              Sunday Specials:  <%= f.text_field :sun_special %>
            <br />

              <%= f.submit "CREATE BAR", class: 'submit', id: 'black-submit' %>
        <% end %>
      </div>

CSS:

#bar-fields {
    text-align: center;
}


#bar-description-field textarea {
    height: 100px;
    width: 250px;
    vertical-align: middle;
}


#bar-fields input[type="button"] {
    margin-bottom: 20px;
}

#bar-fields input[type=text] {
    font-size: 27px;
    margin-bottom: 20px; 
}

#bar-fields select {
    margin-bottom: 20px;
}

Answer 1

You can use this to center a div:

#bar-fields {
    width: 50%;
    margin: 0 auto;
}

then use text-align:left wherever you need to

read more here: How to horizontally center a <div> in another <div>?