Как иметь разные выравнивания в одном div (nav)?

Я хочу, чтобы a#gnbii выровнялось по левому краю панели навигации, а остальные ссылки по центру.

Но я хочу, чтобы моя страница была максимально совместима с изменением размера окна, поэтому я предпочитаю не использовать поля/отступы.

Также я хотел бы добиться этого без дополнительных элементов, если это возможно.

Благодаря сочетанию свойств CSS flexbox и positioning можно удовлетворить все требования.

Сначала добавьте идентификатор в родительский контейнер a#gnbii:

<li class="gnb" id="align-left"> /* NEW - ID added */
<a class="gnb" id="gnbii" href="home.html">
<img id="gnbii" src="../images/instagram icon/1.png" alt="aranpuzzle.ir" height="40px">
<img id="gnbii" src="../images/instagram icon/2.png" alt="aranpuzzle.ir" height="40px">
</a>
</li>

Вот CSS:

ul {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

#align-left {
    position: absolute;
    left: 2%;
}

ДЕМО: https://jsfiddle.net/6pmfc87h/3/

Вот что происходит...

• ul становится flexbox с применением display: flex. Каждый li теперь выстроен в ряд, что является поведением по умолчанию для дочерних элементов flexbox (известных как «элементы flex»).

• justify-content: center центрирует дочерние элементы вдоль главной оси. В данном случае горизонтально.

• align-items: center центрирует дочерние элементы вдоль поперечной оси. В данном случае вертикально.

• position: relative устанавливает ближайшего позиционированного предка для абсолютного позиционирования.

• position: absolute перемещает последний li к левому краю его ближайшего предка.

Чтобы узнать больше о flexbox, воспользуйтесь хорошим справочником: Полное руководство по Flexbox.

Чтобы узнать больше об абсолютной позиции, проверьте это: MDN position

ОБНОВЛЕНИЕ (на основе комментариев; для небольших экранов)

я хочу, чтобы он скользил вправо как можно больше, а не перекрывался...

Итак, мы можем добавить white-space: nowrap к ul, чтобы элементы навигации всегда оставались в строке.

Затем объявите медиа-запрос, чтобы сместить все вправо на меньших экранах:

@media only screen and (max-width: 768px) { 
    ul { justify-content: flex-start; }  /* note: site is RTL */
    #align-left { position: static; }
}

ОБНОВЛЕННАЯ ДЕМО: https://jsfiddle.net/6pmfc87h/4/

... и когда больше нет места для скольжения вправо, я предпочитаю, чтобы проводник не позволял пользователю уменьшать ширину окна!

Вы уверены, что это то, что вы хотите сделать? Существуют некоторые методы JavaScript, которые устанавливают размер окна браузера, но я не уверен, что они полностью надежны во всех браузерах. Что еще более важно, я не думаю, что это соответствует передовой практике. На мой взгляд, пользователю должно быть разрешено изменять размер окна браузера настолько, насколько позволяет браузер. [Подробнее.]

Вам лучше сосредоточиться на тех областях, где у вас больше контроля как у веб-разработчика. Вы можете установить объявление min-width, сообщающее браузеру, что ваш элемент не может стать уже. Или вы можете использовать медиа-запросы, чтобы изменить вещи, чтобы они подходили для небольших экранов.

Если вы хотите выровнять определенный элемент, просто создайте класс и добавьте его к этому элементу. Если вы хотите выровнять последний дочерний элемент или первый дочерний элемент, используйте селектор :first-child или :last-child в вашем css. Помните, что #leftSide — это идентификатор, do повлияет на один элемент, вместо этого используйте класс.

добавьте в свой css следующее:

#leftSide{
    float:left;
}

Но, если бы я был вами; Я бы добавил несколько пикселей левого поля для левого изображения, чтобы оно не было на краю.

К сожалению, мое решение немного портит ваше вертикальное выравнивание!