Как правильно перебивать стили?

[Egrom92]

Вот не могу понять, как нужно правильно прописать?

К примеру у меня блок:

  .second-nav {
    @include size(2);
    @include col();
    
    margin-left: auto;
  }

как мне сделать так, чтобы и на остальных брейкпойнтах у меня работал margin-left: auto?

Просто на данный момент у меня перебивается margin-left: auto на межколонные отступы:

.header .second-nav {
    width: calc(16.66667% - 13px);
    box-sizing: border-box;
    word-wrap: break-word;
    margin-right: 6.5px;
    margin-left: auto;
}
@media screen and (max-width: 1440px) {
    .header .second-nav {
        margin-left: 6.5px;
        margin-right: 6.5px;
    }
}
@media screen and (max-width: 1100px) {
    .header .second-nav {
        margin-left: 6.5px;
        margin-right: 6.5px;
    }
}
@media screen and (max-width: 688px) {
    .header .second-nav {
        margin-left: 6.5px;
        margin-right: 6.5px;
    }
}
@media screen and (max-width: 500px) {
    .header .second-nav {
        margin-left: 2.5px;
        margin-right: 2.5px;
    }
}

Неужели единственное решение, это на каждой ширине перебивать?

.second-nav {
    @include size(2);
    @include col();
    
    margin-left: auto;
    
    @include lg-block{
      margin-left: auto;
    };
    
    @include md-block{
      margin-left: auto;
    };
    
    @include sm-block{
      margin-left: auto;
    };
    
    @include xs-block{
      margin-left: auto;
    };
  }

[oleg-valko-pro]

Отправь еще свой конфиг сетки

[Egrom92]

Отправь еще свой конфиг сетки

Вот мои настройки:

var smartgrid = require("smart-grid");

/* It's principal settings in smart grid project */
var settings = {
  outputStyle: "scss",
  columns: 12,
  offset: "13px", //Межколонник
  container: {
    maxWidth: "1328px",
    fields: "56px", //Отступ по краю контейнера
  },
  breakPoints: {
    lg: {
      width: "1440px",
      fields: "40px",
    },
    md: {
      width: "1100px",
      fields: "40px",
    },
    sm: {
      width: "800px",
      fields: "15px",
    },
    xs: {
      width: "500px",
      fields: "10px",
      offset: "5px",
    },
  },
  mixinNames: {
    container: "container",
  },
};

smartgrid("./src/scss", settings);

А вот тут у меня настройки для контейнера, чтобы у меня была не резиновая вёрстка а промежуточная.

.container {
    @include lg(max-width, $break_md - $fields_lg * 2);
    @include md(max-width, $break_sm - $fields_md * 2);
    @include sm(max-width, $break_xs - $fields_sm * 2);
    @include xs(max-width, 100%);
}