ハンバーガーメニューでクリックできない

Question

ｃｓｓでハンバーガーメニューを作っています
ですが要素内の右上に固定したくてなかなかできず（要素内ではなくて画面の右端になってしまう）<header>のなかにいれたら要素内で収まりました
完成したと思ったら、<header>内に入れるとクリックが出来なくなってしまいました
これはなにが原因ですか？

<header>内には入れたくなかったんですけど入れないと要素内の右上に固定できなくて、、、

    <header class="header2">
    <div class="header-menu">
        <h1>トーク</h1>
        <div>
        <p>テストとうろくテスト</p>
        </div>
		</div>
  

<!--ニックネームとサムネの変更用-->
        <input type="checkbox" class="openSidebarMenu" id="openSidebarMenu"> 
        <label for="openSidebarMenu"class="sidebarIconToggle">
        <img src="">
        </label>
	</header>
        <div id="sidebarMenu">
        <div class="sidebarMenuInner">
            <form action="" enctype="multipart/form-data" method="POST">
                ニックネーム:&nbsp;<input type="text" value="テストとうろくテスト">
                サムネイル:&nbsp;<input type="file" name="selfie">
                <button type="submit">変更する</button>
            </form>
      </div>
      </div><!--sidebarMenu-->

header{
    background: #93aad4;
    height: 40px;
    position: fixed;
    display: block;
    width: 100%;
    max-width: 800px;
    top: 0; /* 上下の固定位置を上から0pxにする */
    z-index: 100;
}
.header2 {
    background: #fff;
    height: 60px;
    position: fixed;
    display: flex;
    width: 100%;
    max-width: 800px;
    top: 0; /* 上下の固定位置を上から0pxにする */
    z-index: 20;
    border-bottom: solid .8px #dcdcdc;
    justify-content: space-between;
}
.header-menu{
    display:flex;
    height:60px;
    justify-content: space-between;
    align-items: center;
    margin:0 55px 0 0;
    width: 100%;
}
header h1 {
    font-size: 1.3rem;
    margin: 0.2rem 0 0 0.2rem;
}
.header2 h1 {
    font-size: 1.6rem;
    margin: 0 0 0 0.6rem;
}
.header2 p {
    font-size: 1rem;
    margin: 2px 0 0 0;
}
.sidebarIconToggle{
	position: absolute;
	  top: 6px;
	right: 5px; 
	 z-index: 99;
}
.sidebarIconToggle img {
    width: 45px;
    height: 45px;
    border-radius: 30px;
   
}
.header2 div{
  display:flex;
align-items: center;
}

#sidebarMenu { /*メニュー本体*/
    height: 20%;
    position: fixed;
    z-index: 20;
    width:800px;
    background-color:#FFF;
    visibility: hidden;
    transition: transform 250ms ease-in-out;
	box-shadow: 3px 3px 3px 3px rgba(0, 0, 30, .2);
	transition : 1.2s;
	opacity:0;
}
.sidebarMenuInner{ /*メニューの中身*/
	width:100%;
    margin:0 auto 0;
}

input[type="checkbox"]:checked ~ #sidebarMenu {
    transform: translateX(0);/*メニューオープン*/
	visibility:inherit;
	opacity:1;
}

input[type=checkbox] {
    transition: all 0.3s;
    box-sizing: border-box;
    display: none;
}

Answer 1

input[type="checkbox"]:checked ~ #sidebarMenu

ここのセレクタがおかしいですよ

Comments

[ayuayuayu]

input[type="checkbox"]:checked + #sidebarMenu　にしても同じでした、、

[somatech0428]

#sidebarMenuを<header>の中、</label>の隣にお引越ししてください。
それで動きますよ。

[ayuayuayu]

動きはできました！
ですがヘッダー内の右に
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
<label for="openSidebarMenu"class="sidebarIconToggle">
<img src="">
</label>
これを固定するのが目的で
やはり画面のみぎはじになってしまいます、、、

[ayuayuayu]

全部ヘッダーに入れたらできました！！
ありがとうございました！

[somatech0428]

よかったです！
HTMLの親子関係やCSSのpositionについて学習すると今回の原因がわかると思います。