CSSとHTMLのタブ切り替えについて

前提・実現したいこと

CSSとHTMLを使ってタブ切り替えできる見積フォームを作ろうとしています。
https://copypet.jp/codedescription/1033/
からCSSとHTMLをコピーし、自分の用途に合うように
カスタマイズしています。しかし、タブを５つに増やした結果、
問題が発生しています。

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

三番目のタブと四番目のタブだけマージンを一番左にできません。

該当のソースコード

html

<div class="cp_tab"> <div class="cp_tabpanels"> <label for="tab5_1">tab 1</label> <input id="tab5_1" name="cp_tab" type="radio" checked="checked"> <div class="cp_tabpanel"> <h4>First Tab</h4> <p>First Tab text</p> </div> </div> <div class="cp_tabpanels"> <label for="tab5_2">tab 2</label> <input id="tab5_2" name="cp_tab" type="radio"> <div class="cp_tabpanel"> <h4>Second Tab</h4> <p>[zigaform-estimator id="6"]</p> </div> </div> <div class="cp_tabpanels"> <label for="tab5_3">tab 3</label> <input id="tab5_3" name="cp_tab" type="radio"> <div class="cp_tabpanel"> <h4>third Tab</h4> <p>Second Tab text</p> </div> </div> <div class="cp_tabpanels"> <label for="tab5_4">tab 4</label> <input id="tab5_4" name="cp_tab" type="radio"> <div class="cp_tabpanel"> <h4>forth Tab</h4> <p>forth Tab text</p> </div> </div> <div class="cp_tabpanels"> <label for="tab5_5">Tab 5</label> <input id="tab5_5" name="cp_tab" type="radio"> <div class="cp_tabpanel"> <h4>Fifth Tab</h4> <p>fifth Tab text</p> </div> </div> </div> ``````

CSS
/* Add your CSS code here.

For example:
.example {
color: red;
}

For brushing up on your CSS knowledge, check out http://www.w3schools.com/css/css_syntax.asp

End of comment */

*, *:before, *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cp_tab {
display: block;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin: 1em auto;
overflow: hidden;
}
.cp_tab input[type='radio'] {
border-bottom: 1px solid rgba(239, 237, 239, 0.5);
cursor: pointer;
-webkit-appearance: none;
appearance: none;
display: block;
width: 100%;
outline: none;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.cp_tab .cp_tabpanels label {
cursor: pointer;
display: block;
line-height: 1em;
padding: 2rem 0;
text-align: center;
}
.cp_tab [type="radio"]:hover,
.cp_tab [type='radio']:focus {
border-bottom: 1px solid #fd264f;
}
.cp_tab [type='radio']:checked {
border-bottom: 2px solid #fd264f;
}
.cp_tab [type='radio']:checked + .cp_tabpanel {
opacity: 1;
}
.cp_tab [type='radio'] + .cp_tabpanel {
display: block;
opacity: 0;
padding: 2rem 0;
width: 90%;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.cp_tab .cp_tabpanels {
width: 20%;
}
.cp_tab .cp_tabpanels [type='radio'] + .cp_tabpanel {
width: 500%;
}
.cp_tab .cp_tabpanels [type='radio']:checked + .cp_tabpanel {
margin-left: 0;
}

.cp_tab .cp_tabpanels:nth-child(2) [type='radio']:checked + .cp_tabpanel {
margin-left: -100%;
}
.cp_tab .cp_tabpanels:last-child(3) [type='radio']:checked + .cp_tabpanel {
margin-left: -200%;
}
.cp_tab .cp_tabpanels:last-child(4) [type='radio']:checked + .cp_tabpanel {
margin-left: -300%;
}
.cp_tab .cp_tabpanels:last-child [type='radio']:checked + .cp_tabpanel {
margin-left: -400%;
}


### 試したこと

.cp_tab .cp_tabpanels:last-child(3) [type='radio']:checked + .cp_tabpanel {
	margin-left: -200%;
}
.cp_tab .cp_tabpanels:last-child(4) [type='radio']:checked + .cp_tabpanel {
	margin-left: -300%;
}

margin-left の値を変えてみましたが、変化なしです。

###メッセージ
CSSもHTMLも勉強中ですが、まだまだ知識不足でして
お力添えいただけると本当に助かります。
よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

CSS
1/*                      ↓ lastじゃない */
2.cp_tab .cp_tabpanels:nth-child(3) [type='radio']:checked + .cp_tabpanel {
3    margin-left: -200%;
4} /*                    ↓ lastじゃない */
5.cp_tab .cp_tabpanels:nth-child(4) [type='radio']:checked + .cp_tabpanel {
6    margin-left: -300%;
7}
8```**動くサンプル：**[https://jsfiddle.net/Lapho403/](https://jsfiddle.net/Lapho403/)