CSS margin-left Problem

Hallo Breadfish-Community,

ich habe ein kleines Problem, und zwar möchte ich eine Trennlinie für die Bildschirmgröße von 400px bis 480px anpassen.
Die Linie habe ich schon formatieren können, aber das "Icon"/Bild will sich nicht verschieben, egal ob ich margin-left oder padding-left verwende.
Habe auch schon versucht andere Position zu nehmen aber ohne Erfolg.
Ich stelle mir die Frage weshalb auch im negativen sowohl Positiven Bereich nichts verschoben wird, ist anscheinend "verankert" oder verstehe ich das falsch?

Ich stehe aufm Schlauch, vielleicht kann mir einer weiterhelfen

/* für größere Bildschirme; klappt :) */
.car-icon {
	background-image: url(URL);	
	background-repeat: no-repeat;
	height: 10em;
	width: 10em;
	margin-left: 47em;
	position: absolute;
	margin-top: -0.5em;
}


.car-divider {
	background-color: #e5e5e5;
	width: 46em;
	height: 2px;
	margin-bottom: 3em;
	margin-left: 9.9em;
}

@media (min-width: 400px) and (max-width: 480px) {
	.car-divider {			// Funktioniert
		position: relative;
		margin-top: 29em;	
		max-width: 21em;
	}
	.car-icon {				// Problem: will sich nicht verschieben
		margin-left: -20em;
		position: absolute;	
	}
}

HTML:

<div class="car-divider">
    <div class="car-icon"></div>
</div>

Screenshot:

Auf dem Desktop ( kein Problem ) :

desktop.PNG

Auf dem Handy ( Problem... ) :
FullSizeRender.jpg

Zitat von Fancy

Setzt das Icon doch als before element im strich?
dann wird er sich immer rechts halten.

Muss ich mal schauen ist mir nicht eingefallen...

Zitat von Fancy

und warum nutzt du margin wenn du das icon absolute positioniert hast wenn left, right da geht?

Oupps
Dankeschön das war das Problem und ich hab mich schon den Kopf zerrissen...
Mir ist das nicht eingefallen, hab mal wieder zu kompliziert gedacht...
Vielen Dank nochmal für deine Hilfe