Hi guys, my columns do not centre, any ideas? - php

Question

my columns are not behaving and are all squashed to the left, i've tried overriding the col-2 to set no margins or flex and nothing works, any ideas? thanks.
<li>
<div class="link"><i class="fa fa-database"></i>More<i class="fa fa-chevron-down"></i></div>
<ul>
<?php foreach ($Ranking as $post): ?>
<div class="row" style="margin: 0px 30px;">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-2">
<h4 style="font-weight: 500;"><a
href="/single_page_main.php?id=<?php echo $post['id']; ?>"><?php echo $post['title']; ?>
</a></h4>
</div>
<div class="col-2">
<h4><?php echo html_entity_decode($post['body']); ?></h4>
</div>
<div class="col-4">
<img src="<?php echo '/assets/images/' ,
$post['image']; ?>">
</div>
<div class="col-4">
<a href="/player_profile.php?id=<?php echo $post['id']; ?>"><div class="">Profile</div>
</a>
</div>
</div>
</div>
<?php endforeach; ?>
</ul>
</li>
</ul>
$(function() {
var Accordion = function(el, multiple) {
this.el = el || {};
this.multiple = multiple || false;
var links = this.el.find('.link');
links.on('click', {el: this.el, multiple: this.multiple},
this.dropdown)
}
Accordion.prototype.dropdown = function(e) {
var $el = e.data.el;
$this = $(this),
$next = $this.next();
$next.slideToggle();
$this.parent().toggleClass('open');
if (!e.data.multiple) {
$el.find('.submenu').not($next).slideUp().parent().removeClass('open');
};
}
var accordion = new Accordion($('#accordion'), false);
});
The above is the jquery accordion code used to show the ul content on click, however all the conent within this has been moved to the left and none of it centres even with overriding css styles or html code, any ideas? thanks.
.accordion {
width: 100%;
margin: 30px auto 20px;
background: #FFF;
max-width: 800px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.accordion .link {
cursor: pointer;
display: block;
padding: 15px 15px 15px 42px;
color: #4D4D4D;
font-size: 14px;
font-weight: 700;
border-bottom: 1px solid #CCC;
position: relative;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
Above is the CSS, thanks.
I get this
I'm trying to achieve this