検索ボックスを左側に拡張しようとしましたが、どういうわけか幅を占めて右側に拡張されてしまいます。左マージンを与えてみましたが、まだ機能しません。

ここでは右に展開していますが、左にも展開したいです。左パディングを追加しようとしましたが、ボックスの外側ではなく内側に影響を受けます。

.検索クリック {
  境界線: 1px 実線 #ccc;
  概要: なし。
  背景サイズ: 22px;
  背景位置: 13px;
  境界半径: 100px;
  幅: 363ピクセル;
  高さ: 40ピクセル;
  パディング: 21px;
  トランジション: すべて 0.5 秒。
  マージントップ: 54px;
  テキストオーバーフロー: 省略記号;
  位置: 相対的;
  オーバーフロー: 非表示;
  //マージン左: -410px;
}

.search-クリック:フォーカス {
  幅: 800ピクセル;
  パディング左: 20px;
}

.search-クリック入力 {
  背景: 透明;
  境界線: 1px 実線 #ccc;
  概要: なし。
  位置: 絶対;
  幅: 300ピクセル;
  高さ: 50ピクセル;
  左: 0%;
  パディング: 10px;
}

<input type="text" class="search-click" placeholder="港、国、国際コードポートを検索" />