How to center two text columns in CSS.

i have a problem centering these two text columns so that they stand beside each other can anybody help me with this issue, i managed to do it previously by setting the padding, margin manually, but of course i want it to be work on all formats.

here is the code for the css (i have deleted most of the useless css but i don't know what to use.)

.AboutBA {
text-align: justify;
position: relative;
display:inline;
}

.Position {
text-align: justify;
display: inline;
}

and here is for the html

<div class="container">

<div class="AboutBA">
<h3>About BrandAmb</h3>
<p><i>BrandAmb</i> is a Danish marketing company  whose<br/> goal mission is to help both Danish and foreign<br/> brands expand their brand in Scandinavia through<br/> social marketing. By analyzing and studying your<br/> brand and the audience that you are trying to reach<br/> we, through our database of ambassadors, connects<br/> your brand with one or several of our brandambassadors.<br/> By using their broad platform our brandambassadors<br/> will help your brand reach the audience that is at target<br/> and get your brand the recognition that it deservs in<br/> Scandinavia. <a href="About-us.html">Read more about us.</a></p>
</div>

<div class="Position">
<h3>Our position</h3>
<p>When it comes to our position between your brand and<br/> our brandambassors we can have two potions depening<br/> on what your seeking as a brand. The first position is<br/> merely as an intermediary between your brand and our<br/> ambassadors. That means that we create and find the<br/> right connection and make sure it's a match, but the<br/> rest is up to you. Our second position is more hands-on.<br/> By using our cultural knowledge we can, if requested,<br/> help make a stragegy to fit excactly your targeted<br/> audiance in the Scandinavian market. Furthermore we<br/> help with communication between the two parties so any<br/> cultural or communication barriers are avoided.<br/><a href="products.html">Read about our products.</a></p>
</div>
</div>

thx in advance

regards kristoffer

Solution

This would work for non responsive sites. If you would like it responsive, you can modify it with some media queries or use a responsive framework such as foundation to define the width at different viewport sizes, such as large-6 / medium-6 / small-12 etc

.container {
  width:auto;
  margin:0 auto;
}
.content {
  width:50%;
  float:left;
  text-align:center;
}

<div class="container">

<div class="AboutBA content">
<h3>About BrandAmb</h3>
<p><i>BrandAmb</i> is a Danish marketing company  whose<br/> goal mission is to help both Danish and foreign<br/> brands expand their brand in Scandinavia through<br/> social marketing. By analyzing and studying your<br/> brand and the audience that you are trying to reach<br/> we, through our database of ambassadors, connects<br/> your brand with one or several of our brandambassadors.<br/> By using their broad platform our brandambassadors<br/> will help your brand reach the audience that is at target<br/> and get your brand the recognition that it deservs in<br/> Scandinavia. <a href="About-us.html">Read more about us.</a></p>
</div>

<div class="Position content">
<h3>Our position</h3>
<p>When it comes to our position between your brand and<br/> our brandambassors we can have two potions depening<br/> on what your seeking as a brand. The first position is<br/> merely as an intermediary between your brand and our<br/> ambassadors. That means that we create and find the<br/> right connection and make sure it's a match, but the<br/> rest is up to you. Our second position is more hands-on.<br/> By using our cultural knowledge we can, if requested,<br/> help make a stragegy to fit excactly your targeted<br/> audiance in the Scandinavian market. Furthermore we<br/> help with communication between the two parties so any<br/> cultural or communication barriers are avoided.<br/><a href="products.html">Read about our products.</a></p>
</div>
</div>