Storefront Bootstrap Code Causing Misalignment

Site URL: https://www.takebackyourcareerpodcast.com/coaching

Hi there,

I am attempting to build a basic storefront on my site. I've inserted an HTML code block and have the following code inserted. The page looks the way I want and functions properly. The only problem is that the block doesn't center with the page. I am having issues with the bootstrap aspect and am unsure what to do to center the column on my page. The entire HTML block is off to the right-hand side of the page instead of being centered. I'd like to be able to add more columns/div sections and ensure they're always centered.

Pic attached for reference.

Password: boots135

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://kajabi-storefronts-production.global.ssl.fastly.net/kajabi-storefronts-production/themes/782852/assets/styles.css?1607200833886045" />
  
<!-- Section 1 -->

<div class="col-md-3">
  <a href="https://www.google.com" class="card section--light" style="text-align: left;background: #ffffff;">
    
      <img class="card--img" src="https://news.blr.com/app/uploads/sites/3/2019/06/Coaching-03.jpg"/>
    
    <div class="card--body">
      <h1 class="card--title" style="font-family:brownmax;" "text-align: center">Coaching — 60 Minutes</h1>
      <p class="card--description" style="text-align: justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
      <h1 class="card--price" style="font-family:futura-pt;" "text-align: justify">$99.00 USD</h1>
    </div>
  </a>
</div>

Add to Home >Design > Custom CSS

[data-section-id] {
    display: flex !important;
}

1 hour ago, tuanphan said:

Add to Home >Design > Custom CSS

[data-section-id] {
    display: flex !important;
}

 

This is great and it centered the content. Thank you! I have a follow-up question now... the HTML/Code block is quite far down the page. Is there some CSS that will help me bring the block to the top the section?

Thanks again.

On 12/22/2020 at 10:09 AM, gogreenmsu said:

This is great and it centered the content. Thank you! I have a follow-up question now... the HTML/Code block is quite far down the page. Is there some CSS that will help me bring the block to the top the section?

Thanks again.

 

 

Hi. Do you still need help on this?

13 hours ago, tuanphan said:

Hi. Do you still need help on this?

Hi @tuanphan

I removed the code from my site in favor of something else. I think I will be adding it back in though for a different site. If so I will bug you for your help.

Thank you for now!