質問: ### 「calc」と「nth-child」「display: flex」でコンテンツの横並びをレスポンシブで作成しています コンテンツ(li)が6つあり、**3列2行**の並びにしています。 それぞれmargin-rightは20pxですが **3・6番目のmargin-rightのみ、0にしたい**ので、 nth-childを使ったのですが、効いていないようでした。 ちなみにSCSSを使うのが初めてなので sassの書き方に問題があるかもと思っています。 --- 以下htmlとscssを載せます。 ※ネストの問題の可能性もあると思ったのでsectionをまるまる載せてます 問題の箇所は**ulの中のli**です。 ``` card タイトルタイトル テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト タイトルタイトル テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト タイトルタイトル テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト タイトルタイトル テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト タイトルタイトル テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト タイトルタイトル テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト テキストテキストテキスト ``` ``` .card{ width: 100%; height: auto; padding-bottom: 137px; background-color: #EFEFEF; .card__inner{ width: 100%; max-width: 1086px; margin: 0 auto; padding-top: 68px; color:#6F7579; @include mq('tab'){ max-width: 730px; } @include mq('sp'){ max-width: 342px; } h2::after{ content: ""; width: 76px; display: block; margin: 44px auto 0 auto ; border: 1px solid #3F51B5; } .card__box{ width: 100%; padding-top: 68px; display: flex; flex-wrap: wrap; li{ width: calc(33.33333333% - 30px); height: 355px; background-color: #fff; margin: 0 30px 20px 0; padding: 16px; &:nth-child(3n) { margin-right: 0; } div{ width: 100%; height: 161px; background-color: #DDD; } .card__box--txt{ width: 100%; padding-top: 26px; p{ width: 100%; padding-top: 20px; } } } } } } ```
回答: ``` &:nth-child(3n) ``` アンドが全角になっています。