Responsive center alignment of DIV but not text - html

Question

I want to center a DIV within a DIV but not the text, all the solutions are saying to specify my width and set margins to auto, but how does that work if it's a responsive build as if I set the width it wont be? I want to align the contact-info DIVS but not the text. Hope that is clear enough.
Thanks!
<div id="upperfooter">
<div class="container">
<div id="links">
<div class="contact-info col-lg-offset-0 col-lg-3 col-xs-4 col-md-offset-0 col-md-4">
<div class="contact-item">
<h3><strong>COMPANY INFO</strong></h3>
<p>About Nielsen</p>
<p>Investor Relations</p>
<p>Nielsen Families</p>
<p>Responsibility & Sustainability</p>
<p>Press Room</p>
<p>Careers</p>
<p>Contact Us</p>
</div>
</div>
<div class="contact-info col-lg-offset-0 col-lg-3 col-xs-4 col-md-offset-0 col-md-4">
<div class="contact-item">
<h3><strong>INSIGHTS</strong></h3>
<p>Newswire</p>
<p>Reports</p>
<p>News Center</p>
<p>Top 10 & Trends</p>
<p>How We Measure</p>
<p>Webinars & Events</p>
<p>Newsletter Sign-up</p>
</div>
</div>
<div class="contact-info col-lg-offset-0 col-lg-3 col-xs-4 col-md-offset-0 col-md-4">
<div class="contact-item">
<h3><strong>SOLUTIONS</strong></h3>
<p>Advertising Effectiveness</p>
<p>Audience Measurement</p>
<p>Marketing ROI</p>
<p>Price and Promotion</p>
<p>Product Development</p>
<p>Reputation Management</p>
<p>Shopper</p>
</div>
</div>
</div>
</div>
</div>

Answer 1

You should add position: relative to main div and set the smaller width on a contact div, that worked for me.

Answer 2

Since the only elements I see not centered are those with contact-info, but only when screen size is large, an approach is to add some style to the wrapper. Also, you have to remenber that col-x divs should by wrapped by a div with row class on Bootstrap. So, we going to add style display:flex and justify-content:center to this wrapper. Check next example, where redundant classes where removed and borders where added so you have a reference on the visualization.
.contact-info {
border: 1px solid blue;
}
.contact-item {
border: 1px solid red;
}
.row {
border: 1px solid green;
display: flex;
justify-content: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div id="upperfooter">
<div class="container">
<div id="links" class="row">
<div class="contact-info col-lg-3 col-xs-4">
<div class="contact-item">
<h3><strong>COMPANY INFO</strong></h3>
<p>About Nielsen</p>
<p>Investor Relations</p>
<p>Nielsen Families</p>
<p>Responsibility & Sustainability</p>
<p>Press Room</p>
<p>Careers</p>
<p>Contact Us</p>
</div>
</div>
<div class="contact-info col-lg-3 col-xs-4">
<div class="contact-item">
<h3><strong>INSIGHTS</strong></h3>
<p>Newswire</p>
<p>Reports</p>
<p>News Center</p>
<p>Top 10 & Trends</p>
<p>How We Measure</p>
<p>Webinars & Events</p>
<p>Newsletter Sign-up</p>
</div>
</div>
<div class="contact-info col-lg-3 col-xs-4">
<div class="contact-item">
<h3><strong>SOLUTIONS</strong></h3>
<p>Advertising Effectiveness</p>
<p>Audience Measurement</p>
<p>Marketing ROI</p>
<p>Price and Promotion</p>
<p>Product Development</p>
<p>Reputation Management</p>
<p>Shopper</p>
</div>
</div>
</div>
</div>
</div>