liメニューが表示される位置を変更したい

Question

CSS詳しくない者です。
サンプルを流用したのですが、なかなか思い通りに改良できません。

ベルアイコンをクリックすると、アニメーションでliメニューが下に表示されますが、

これを下のように、もっと左側に表示されるように配置したいです。

ulや>liに

margin-leftを設定しても変わりませんでした。

どこを修正すれば良いのでしょうか？
分かる方教えていただけないでしょうか？

$menuAppearDuration : .3s;
$bumpUpDelay : $menuAppearDuration - 0.1s;

@keyframes bumpUp{
  20%{ transform:translateY(-4px); }
  100%{ transform:none; }
}  

.toggle-menu{ list-style:none; padding:0; margin:3em auto;  color:#242C35; 
  > li{ display:block;  
    > input{ display:none; 
      
      &:checked{
        ~ label{ box-shadow:0 0 8px rgba(0,0,0,.5); animation:none; transition:.1s;  }
        ~ .toggle-menu-options{ 
          > ul{ margin-bottom:2em; 
             > li{ margin:0; opacity:1; }
          } 
        }
      }
    }
    
    > label{ 
          width:60px; //追加
          text-align: center; //追加
          display:block; 
          //padding:1em 1em 1em 1.4em;  //コメントアウト
          background:#FFF; 
          position:relative; 
          z-index:1; 
          border-radius:3px; 
          font-weight:600; 
          cursor:pointer; 
          box-shadow:0 0 0 #FFF; 
          transition:.1s; 
          // animation:.22s $bumpUpDelay 1 bumpUp ease-out;
          
          &:hover{
            background:rgba(white, .8);
          }
      }
    
    > .toggle-menu-options{ position:relative; overflow:hidden;
      > ul{ 

        font-size:.9em; 
        list-style:none; 
        margin:-1em .6em 1em; 
        padding:0; 
        border-radius:0 0 4px 4px; 
        border:5px solid rgba(255,255,255,.15); 
        transition:$menuAppearDuration cubic-bezier(.45,.01,.27, 2); 
        perspective:600px;
        
        > li{ 
          padding:.5em 1em; 
          margin-top:-5em; 
          border-bottom:1px solid #E1E1E1; 
          position:relative; 
          cursor:pointer; 
          background:#F6F6F6; 
          color:#666; 
          transition:$menuAppearDuration ease; 
          transition-property:margin, opacity;
          //width: 600px; //追加
          @for $i from 2 to 12{
           // &:nth-child(#{$i}){ transition-delay:$menuAppearDuration/2 * $i; z-index:12 - $i; }
          }
          
          &:first-child{ padding-top:1.2em; } 
          &:last-child{ border:0; border-radius:0 0 3px 3px; } 
          &:hover{ 
            background:lightyellow; 
            box-shadow:5px 0 rgba(lightyellow,.1), -5px 0 rgba(lightyellow,.1); }
        }
      }
    }
  }
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

<div style="padding-left: 600px;">
    <ul class="toggle-menu">
        <li>
            <input type="checkbox" id="item1" />
            <label for="item1">
                <i class="fas fa-bell "></i>
            </label>
            <div class="toggle-menu-options">
                <ul>
                    <li>「いいね」されました</li>
                    <li>フォローされました</li>
                    <li>システムからお知らせが届きました</li>
                </ul>
            </div>
        </li>
    </ul>
</div>




  

Answer 1

cssについて聞きたい時にscssを貼り付けるのは止めましょう。
こちらでコンパイルしなきゃならないので面倒です。

これを下のように、もっと右側に表示されるように配置したいです。　

と、数値指定などがなくアバウトなので数値は適当ですが、下記のcssを組み込めば出来ます。

label[for="item1"] {
    transform: translateX(195px);
}

Comments

[pecchan]

色々と不手際、申し訳ございません。
今後は気を付けます。

数値指定などもアバウトでしたが、読み取っていただき有難う御座います。