Sub columns of a variable columns have weird gap

[Jordan-T]

This is about Bulma.

Overview of the problem

This is about the Bulma CSS framework variable columns

I'm using Bulma 0.9.0

Description

When you use a variable column, all child columns have variable padding (but not the margin of the columns).

I think you need a direct child selector: .columns.is-variable > .column

If your intention is to set for every child columns, you need to specify the columns margin too.

.columns.is-variable .columns
  margin-left: calc(-1 * var(--columnGap))
  margin-right: calc(-1 * var(--columnGap))

Steps to Reproduce

Use a columns variable with child columns like this DOM

<div class="columns is-variable is-1">
  <div class="column is-3">
    <div class="bd-notification is-primary has-text-centered">
      Side
    </div>
  </div>
  <div class="column is-9">
    <div class="bd-notification is-primary has-text-centered">
      Main
      <div class="columns">
        <div class="column is-3">
          <div class="bd-notification is-warning">
            child 1
          </div>
        </div>
        <div class="column is-9">
          <div class="bd-notification is-info">
            child 2
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Expected behavior

Has gap like this:

Actual behavior

The screenshot: