Carousel won't stay contained in Minimal Mistakes theme

I’d like to use the Slider/Carousel from Slider/Carousel | Jekyll Codex with the Minimal Mistakes theme.

Adding the carousel component to my site and instantiating it on my site’s home page with links to some images went smoothly, and the carousel and its images are working, but I’m having an issue with it’s visual appearance.

Whenever the browser window is wide enough to display “author_info” and “Custom sidebar navigation” elements, which appear to the left of the contents of the Home page, then the left edge of the carousel container “leaves” the content container, and appears at the far left of the page, visually overlaying the left side custom nav bar and author info.

I studied the CSS for both the carousel and the splash layout and its parents, and I can’t figure out why the carousel container won’t stay contained in the content section of the splash page layout.

Can anyone shed some light on why this is happening, and suggestions to fix it? I’m not wedded to using this particular implementation of the carousel if there is another that works better with the Minimal Mistakes theme.

My environment:

I made no modifications to any of the carousel files, copied carousel.html to _includes, and my file looks like this:

layout: splash
permalink: /
author_profile: true
  nav: docs

Welcome to my blog!

Here are some pictures from posts from my `personal` category

 {% include Carousel.html height="50" unit="%" duration="7" %}

I do the site build locally, so I’m not restricted to any particular version of Ruby, or Jeykll, nor am I restricted on the use of any gems.

  • Windows 10 Build 19041
  • Ruby ruby 3.0.0p0 (2020-12-25 revision 95aff21468) [x64-mingw32]
  • Visual Studio Code IDE
  • JeykllVersion and the plugins I’m using:
gem "jekyll", "~> 4.2.0"
gem "minimal-mistakes-jekyll", "~> 4.22.0"
gem 'jekyll-compose', group: [:jekyll_plugins]
# If you have any plugins, put them here!
group :jekyll_plugins do
  gem "jekyll-paginate", "~> 1.1.0"
  gem "jekyll-sitemap", "~> 1.4.0"
  gem "jekyll-gist", "~> 1.5.0"
  gem "jekyll-feed", "~> 0.15.1"
  gem "jekyll-include-cache", "~> 0.2.1"
  gem "jekyll-timeago", "~> 0.14.0"
  gem "jekyll_version_plugin", "~> 2.0.0"
  gem "jekyll-minifier", "~> 0.1.10"
  gem "jekyll-archives", "~> 2.2.1"
  gem "flexible_include", "~> 1.1.0"
  gem "jekyll-relative-links", "~> 0.6.1"

Found it: The single.html layout includes a div class="page__inner-wrap"> tag, and places content inside this div. The splash.html layout does not. In general, single.html has quite a bit more functionality than splash.html. I’m going to create my own override of splash.html. and add stuff from single.html to get the splash layout I want.