指定していないはずのpaddingが反映されている。

Question

前提・実現したいこと

HTML/CSSでのコーディング中、
Sassでスタイルをつけていたのですが、Sass上でもコンパイルされたCSS上でも、記載されていないpaddingがブラウザ上だとかかってしまっている。
.header__title になぜかかかってしまったpaddingを解除したい。

発生している問題・エラーメッセージ

エラーは発生していないようです

該当のソースコード

@mixin header-title($width){
  color: $white;
  height: $width;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}

~~~~~

.header__title{
    
    @include header-title(100vh);
    &-about{
      @include header-title(63vh);
    }
  
    &--subtitle{
      font-family: $fontY;
      font-family: $fontM;
      font-size: 2rem;
      line-height: 1;
      font-weight: bold;
    }
    &--maintitle{
      font-family: $fontM;
      font-size: 7.2rem;
      line-height: (86 / 72);
      font-weight: bold;
  
    }
  }

@charset "UTF-8";

/* 関数 */
$white:#ffffff;
$black:#222;
$gray:#525252;
$back:#F2F2F2;
$fontM: 'Montserrat', sans-serif;
$fontS: 'Noto Sans JP', sans-serif;
$fontY:"游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
$textMargin:30px 0;

@mixin padding($padding){
  padding-left: $padding;
  padding-right: $padding;
}

@mixin header-image($width,$height){
  width: $width;
  height: $height;
  margin:0 calc(50% - 50vw);
  position: absolute;
  top: 0;
  z-index: -2;
}
@mixin header-black($width,$height){
  background:$black;
    width: $width;
    height: $height;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -3;
}

@mixin header-title($width){
  color: $white;
  height: $width;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}


@mixin description($weight){
  font-family: $fontY;
   font-weight: $weight;
   font-size: 1.6rem;
  padding-top: 17px;
  padding-bottom: 18px;

}
/* 共通 */
html{
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body *{
  box-sizing: border-box;
 
}
body{
  &::after{
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color:#fff;  /* 背景カラー */
  z-index: 9999;  /* 一番手前に */
  pointer-events: none;  /* 他の要素にアクセス可能にするためにポインターイベントは無効に */
  opacity: 0;  /* 初期値 : 透過状態 */
  -webkit-transition: opacity .4s linear;  /* アニメーション時間は 0.8秒 */
  transition: opacity .4s linear;
  }
  &.fadeout::after{
    opacity:1;
    -webkit-transition: opacity .4s linear;  /* アニメーション時間は 0.8秒 */
    transition: opacity .4s linear;
  }
}
section{
 @include padding(170px);
  font-family: $fontM;
  font-family: $fontS;
  font-family: $fontY;
}

.read_more{
  width: 160px;
  height: 36px;
  background-color: $black;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  a{
    border: none;
      display: block;
      width: 100%;
      color: $white;
      background-color: $black;
      text-decoration: none;
      font-style: $fontM;
      font-weight: bold;
    }
  
}

h2{
  font-family: $fontM;
  font-weight: bold;
  font-size: 3.2rem;
  line-height: (94 / 32);
}

h3{
  font-size: 2.4rem;
  font-weight: bold;
  font-family: $fontY;
}
p{
  font-size: 1.6rem;
}

li{
  list-style: none;
}

//HEADER
#header{
  margin: 0 calc(50% - 50vw);
  // height: 100vh;
  position: relative;
  .header__background{
    background:url(../images/kv-img2x.png)no-repeat center/cover;
    @include header-image(76vw,86vh );

    &-about{
      background: url(../images/[e-mail])no-repeat center/cover;
      @include header-image(76vw,52vh );
    }
    
  }
  .header__background--black{
    @include header-black(50%,100vh );
    &-about{
      @include header-black(50%,63vh );
    }
  }
  .header__background--gray{
    width: 100vw;
    height: 100vh;
    background-color: rgba($color: $black, $alpha: 0.6);
    display: none;
    position: absolute;
    z-index: -1;
    
  }
  .header__title{
    
    @include header-title(100vh);
    &-about{
      @include header-title(63vh);
    }
  
    &--subtitle{
      font-family: $fontY;
      font-family: $fontM;
      font-size: 2rem;
      line-height: 1;
      font-weight: bold;
    }
    &--maintitle{
      font-family: $fontM;
      font-size: 7.2rem;
      line-height: (86 / 72);
      font-weight: bold;
  
    }
  }
  .header__nav{
    display: flex;
    width: 100vw;
    justify-content: space-between;
    align-items: center;
    padding: 30px 58px 30px;
    position: fixed;
    z-index: 1;
  
    &.withColor{
      transition: all 0.3s ease;
      background-color:rgba($color: $black, $alpha: 0.9)
    }
    
    &--logo.gray{
      opacity: 0.4;
    }
   
  
    &--menu{
      display: flex;
      align-items: center;
      color: $white;
      z-index: 99;
      cursor: pointer;
      &-bar{
        width: 61px;
        height: 13px;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 90;
        
  
        &,&::before,&::after{
          content: '';
          display: block;
          height: 3px;
          width: 25px;
          border-radius: 3px;
          background-color: $white;
          position: absolute;
        }
        &::before{
          bottom: 5px;
        }
        &::after{
          top: 5px;
        }
      }
      p{
        margin-left: 39px;
        font-family: $fontM;
        font-size: 1rem;
        font-weight: bold;
      }
  
      
      &.open .header__nav--menu-bar{
        background-color: rgba(255, 255, 255, 0);
      } 
      &.open .header__nav--menu-bar::before{
        transform: rotate(45deg);
        bottom: 0;
      }
      &.open .header__nav--menu-bar::after{
        transform: rotate(-45deg);
        top: 0;
      }
    }
    
  
  }
}




//NAVIGATION
  .header__hamburger{
    width: 520px;
    height: 100vh;
    background-color:rgba($color: $black, $alpha: 0.9);
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateX(100%);
    flex-direction: column;
    transition: all 0.4s ease;
    z-index: 0;
    position: fixed;
    img{
      margin-bottom: 40px;
    }
    &--menu{
      text-align: center;
      li{
        margin-bottom: 30px;
        &:last-of-type{
          margin-bottom: 0;
        }
        a{
          color: $white;
          font-size: 2rem;
          line-height: 1;
          font-weight: bold;
          text-decoration: none;
        
        }
      }
    }
    &.open{
      transition: all 0.4s ease;
      transform: translateX(0);
    }
  }

//BACKGROUND
.background{
  background: linear-gradient(180deg,$white 0%,$white 50%,$back 50%,$back 100%);
  margin: 0 calc(50% - 50vw);
  padding-bottom: 80px;
  width: 100vw;
  display: grid;
  grid-template-areas: 
  "about about"
  "works culture";

試したこと

・別のmixinを指定してみても、解除されない。
・paddingを上書きしてみても指定されない。

Comments

[Lhankor_Mhy]

スクリーンショットを拝見すると、style.scss:42 と style.scss:184 の二か所にスタイルがあるようですが、これは実際のSCSSファイルだとどうなっていますか？
見た感じ、184行目がご提示のCSSのように見えます。

[duu]

追記依頼ありがとうございます。
実際のファイルだと、42行目までに mixin を設定して、184行目のところで include しております。

mixin内でpaddingを上書きしても反応しなかったです。

[Lhankor_Mhy]

ご提示のコードを試してみましたが、再現しませんでした。
@mixin padding() を空にして再コンパイルするとどうなりますか？

Answer 1

下みたいにしたらと回答をすると他の方に怒られるだろうか？
通常であればstyle.scssを探してもとのpaddingの記述を消すべきだとは思うけども。
どうしても記述が探せない場合にはこれするしかないよねぇ。
と言っても、見つからない場合は稀だけどね。

#header .header__title {
 padding: 0 !important;
}