# CSS Modification Help

**URL:** <https://talk.jekyllrb.com/t/css-modification-help/2421>\
**Category:** Help\
**Created:** [December 15, 2018, 4:50pm UTC](https://talk.jekyllrb.com/t/css-modification-help/2421 "2018-12-15T16:50:56Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![0xdf](https://avatars.discourse-cdn.com/v4/letter/0/58f4c7/32.png) [@0xdf](https://talk.jekyllrb.com/u/0xdf)\
**Post date:** [December 15, 2018, 4:50pm UTC](https://talk.jekyllrb.com/t/css-modification-help/2421/1 "2018-12-15T16:50:57Z")

</div>

Hello,

I’ve been running a blog here: [https://0xdf.gitlab.io/](https://0xdf.gitlab.io/). It’s Jekyll with minima theme, though modified a bit at this point.

If you look at my posts, you’ll see that almost all start with a table of contents at the top. What I’d like to do is move that so that it’s off to the left side of the content. And I did that, sort of. I’ve modified the default.html layout to look like this:

```auto
    <main class="page-content sidebar-container" aria-label="Content">
    {% if page.sidebar %}
      <div class="sidebar">
          <b>Outline</b>
          {% include toc.html html=content sanitize=true class="inline_toc" id="my_toc" h_min=2 h_max=page.sidebar %}
      </div>
    {% endif %}
      <div class="wrapper">
        {{ content }}
      </div>
    </main>

```

And have custom.css that’s loaded by the page:

```auto
.sidebar {
    height: 75vh;
    position: -webkit-sticky;
    position: sticky;
    top: 20%;
    margin-left: 10px;
}

.sidebar a {
    padding: 6px 8px 6px 10px;
    text-decoration: none;
    font-size: 16px;
    display: block;
    color: #e6e6e6;
}

.sidebar ul {
    list-style: none;
    margin-left: 5px;
}

.post-by-sidebar {
    /* width: 80% */
}

.sidebar-container {
    display: flex;
    justify-content: space-between;
}

```

This gets me close, something like this:

 ![Screenshot%20from%202018-12-15%2011-48-14](https://canada1.discourse-cdn.com/flex030/uploads/jekyllrb/original/2X/a/ac7f741a5052c46fd16b70cdd927c5f417dbb900.png)

The TOC has the desired behavior of staying in place as the user scrolls up and down. There’s two things I’d like to change:

1. It’s stuck way to the left. I can push it over using padding/margins, but that only works for a single screen size. I’d like it to float towards the main column and push up against it, with a defined padding.
2. It pushed the center column off-center. Before I started messing around, the left side of the content was aligned with the page title.

Any suggestions to achieve what I’m looking to do?

Thanks!