cssでpositionを反映させられません

Question

目標

ボタンの位置を少し左に動かす

現状

railsを使っています。
cssを使ってボタンの位置を移動させたいのですがうまくいきません。

試したこと

デベロッパーツールを見たら横線が引かれていました
paddingやmarginも試したのですが駄目でした。

htmlのコード

<div id=asd4>
  <div id="asd2">
    <%= link_to 'Edit', edit_movie_path(@movie) %> 
  </div>
  
  <div id="asd3">
    <%= link_to 'Back', movies_path %>
  </div>
</div>

スタイルシート

#asd2{
  display: inline-block;
  padding: 0.3em 1em;
  text-decoration: none;
  color: #67c5ff;
  border: solid 2px #67c5ff;
  border-radius: 3px;
  transition: .4s;
}

#asd3{
  display: inline-block;
  padding: 0.3em 1em;
  text-decoration: none;
  color: #67c5ff;
  border: solid 2px #67c5ff;
  border-radius: 3px;
  transition: .4s;
}

#asd4{
  position: relative;
  left: 30;
}

Answer 1

単位を指定していないからでは。

<length>

...
<percentage>
...
auto
...
inherit
...
left - CSS: カスケーディングスタイルシート | MDN

　

<length> データ型は一つの <number> とそれに続く以下に挙げる単位の一つから成ります。単位と数値の間に空白は置きません。数値 0 の後の単位は省略可能です。

<length> - CSS: カスケーディングスタイルシート | MDN

Answer 2

left: 30;が反映されないということでしょうか。適切な単位を設定してください。
px とか em とか % とか・・・・

30px移動させたい場合

#asd4{
  position: relative;
  left: 30px;
}

Comments

[rio13]

ありがとうございます。
できました！！

Answer 3

left: 30;

-> left: 30px;