Ich habe versucht, das Suchfeld nach links zu erweitern, aber irgendwie nimmt es die Breite ein und wird nach rechts erweitert. Ich habe versucht, den linken Rand anzugeben, aber es funktioniert immer noch nicht.

Hier wird es nach rechts erweitert, aber ich möchte, dass es nach links erweitert wird. Ich habe versucht, die linke Polsterung hinzuzufügen, aber sie wird innerhalb der Box und nicht außerhalb davon beeinflusst.

.search-click {
  border: 1px solid #ccc;
  outline: none;
  background-size: 22px;
  background-position: 13px;
  border-radius: 100px;
  width: 363px;
  height: 40px;
  padding: 21px;
  transition: all 0.5s;
  margin-top: 54px;
  text-overflow: ellipsis;
  position: relative;
  overflow: hidden;
  //margin-left: -410px;
}

.search-click:focus {
  width: 800px;
  padding-left: 20px;
}

.search-click input {
  background: transparent;
  border: 1px solid #ccc;
  outline: none;
  position: absolute;
  width: 300px;
  height: 50px;
  left: 0%;
  padding: 10px;
}

<input type="text" class="search-click" placeholder="Search ports, countries, international code port" />