mix-blend-modeが反映されない部分について

前提・実現したいこと

ハンバーガーメニューの色を背景色によって変更したい

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

背景のwidthが100%の部分では思うように色が反転できるのですが、
配置しているboxのwidthを60%、margin:auto;などにしている箇所には色が反転せず、背景の白と被ってしまいます。
原因・対処法などありましたら教えていただきたいです。

該当のソースコード

html
1<div class="menu-btn">
2    <div id="menu-trigger">
3        <span></span>
4        <span></span>
5        <span></span>
6    </div>
7</div>
8
9
10<main>
11
12<section class="section1">section1</section>
13<section class="section2">section2</section>
14<section class="section1">section1</section>
15<section class="section2">section2</section>
16<div class="tameshi">
17      sumple
18</div>
19
20</main>

css
1.menu-btn{
2  mix-blend-mode: difference;
3  width:15%;
4  position: fixed;
5  top: 30px;
6  right: 30px;
7  text-align: right;
8  z-index: 100;
9}
10
11#menu-trigger,
12#menu-trigger span{
13  display: inline-block;
14  transition: all .4s;
15  box-sizing: border-box;
16  z-index: 100;
17}
18#menu-trigger{
19  position: relative;
20  width: 35px;
21  height: 20px;
22}
23#menu-trigger span{
24  position: absolute;
25  left: 0;
26  width: 100%;
27  height: 1px;
28  background-color: #fff;
29  -webkit-transition: 0.5s ease-in-out;
30  -moz-transition: 0.5s ease-in-out;
31  transition: 0.5s ease-in-out;
32}
33#menu-trigger span:nth-of-type(1){
34  top:0;
35}
36#menu-trigger span:nth-of-type(2){
37  top:9px;
38}
39#menu-trigger span:nth-of-type(3){
40  bottom:0px;
41}
42
43.section1{
44  width: 100%;
45  height: 300px;
46  background-color: #000;
47}
48.section2{
49  width: 100%;
50  height: 300px;
51  background-color: #fff;
52}
53.tameshi{
54  width: 60%;
55  height: 1000px;
56  background: #445566;
57  margin: auto;
58}
59