Помогите с html и css Картинка не двигается (margin-left)

Добавь display: block; к стилям .imgl и проверь (F12 в браузере), какие стили реально применяются к изображению.

У вас в .border написано marfin-left вместо маргина)) И дважды...
А по вашему коду - сдвиг картинки должен работать. Но возможно у вас где-то еще в коде встречается img {margin: 0! important} ...потому и не рекомендуют использовать important. Пробуйте .img1 {margin-left: 145px! important;} (без пробела перед important, и пробел после восклицательного знака. mail ломает запись)

И по ходу вам нужно скорее центрировать всё, чем задавать отступ слева в пикселях (в том числе и .border). Потому что у всех экраны разные - а вы делаете страничку под свой экран пикселями) У других будет по другому отображаться...

Такие весчи нужно делать или на процентах, или центрировать.
Центрирование картинки выглядит так:

.img1 { display: block; margin: auto; }

А вашего .border так:

.border { width: ...px; margin: auto; }

(у div по дефолту стоит display:block;)
(ширина основной статьи спокойно может быть в пикселях, главное чтобы было в центре, а не привязано к левому краю экрана)

как один из вариантов, не вникая в код, сработает 100%

img{
position:relative; top:0; left:100px;}
https://jsfiddle.net/u653hgw9/