teotlu

Или background-size: 100% auto;

Всё зависит от задачи. Если сайт адаптивный, очень желательно использовать em, а лучше rem (они теперь поддерживаются всеми браузерами, начиная с IE9). Это позволит избежать массы проблем.
Если есть вероятность, что нужно будет изменить коэффициент масштабирования всего текста на сайте, или большей его части ("сделайте весь текст чуть больше, пожалуйста"), тоже лучше использовать относительные величины.

Для всего остального можно спокойно использовать px. Мы недавно начали делать приложения для мобильных с помощью Cordova, используем Framework7 — у него в стилях тоже всё через px, хотя вёрстка для мобильных.

Но для адаптивных сайтов это тоже не жёсткое правило. Если переход на em затруднителен, а адаптив не требует пропорционального уменьшения всего текста, можно обойтись и px. Вопрос в том, насколько сайт велик и как он разрастётся в будущем.

Плюс, никто не мешает использовать частично em, частично px. Элементы, требующие точных размеров, определённых в px, можно в медиазапросах указать отдельным блоком css. Безграничный простор для творчества, в общем :)

> но теперь у меня есть несколько одинаковый #item
Так не должно быть, id элемента должен быть уникальным и не повторяться у других элементов страницы.

Вам как раз нужно задать уникальные id всем элементам и обратиться к нужному по id, чтобы удалить класс именно у него. А чтобы навесить одинаковые стили, используйте класс item, например.
Пример:

<div id="item1" class="item action"></div>
<div id="item2" class="item action"></div>
<div id="item3" class="item action"></div>

И удаление класса у нужного элемента:
$("#item3").removeClass("action");

У меня свой подход к именованию классов, который чаще всего сводится к префиксам:
lt_ — высший уровень разметки, типа контейнеров для шапки, подвала, сайдбара, основного контента, от layout
b_ — блок или элемент блока (в случае, когда элемент, пишу b_названиеблока_названиеэлемента, типа b_item_cnt или b_item_img)
m_ — модификатор, для навешивания дополнительных стилей на блоки или их элементы

На малых и средних проектах этого за глаза хватает. Вообще из всех рассмотренных методологий понравилась больше всего MCSS, но мне обычно такая строгость разделения слоёв не требуется.

Чтобы не копипастить, сделаю вот так.

Я бы вообще использовал для таких задач какой-нибудь фреймворк для работы с канвасом, типа LibCanvas, где уже предусмотрены такие моменты, буферизация и т.д.

Вам не нужна совместимость со всеми браузерами. Netscape уж точно не нужен :-P

Мне очень помогло ежедневное чтение статей по заданной теме с хабра и прочих ресурсов такого типа. И гугл. Просто море гугла. Не знаешь как что-то сделать — гугл. Знаешь, но считаешь, что не оптимально — гугл. Сделал, но работает не везде — гугл. Главное правильно подбирать запросы, ответы не всегда лежат на поверхности, но они почти всегда есть.

Сразу нужно узнать про такую вещь как css-reset, дабы нивелировать различия браузеров. Очень помогает. Кроме того, я бы прочитал все статьи с html-book.ru, а также про все теги и CSS-свойства (по возможности), ставя в приоритет наиболее популярные.

Можно заморочиться с методологией названий стилей, по типу БЭМ или MCSS, чтобы избежать проблем и путаницы (а они будут) в своих стилях.

И самое главное — нужно просто постоянно верстать. Можно проходить какие-нибудь уроки или ставить себе самому задачи. Если повезёт, можно просто попасть в неплохую фирму и развиваться там. В идеале в фирме должен быть наставник, который поможет-подскажет.

А в какой-то момент, набравшись определённого опыта, начинаешь без проблем решать любую поставленную задачу, потому что уже безошибочно разбираешь в уме страницу на более мелкие блоки и сразу видишь, что и как можно сделать. Вариантов решения одной и той же задачи зачастую очень много. И чем дальше, тем больше, потому что старые браузеры постепенно отмирают, а новые, кто-то медленнее, кто-то быстрее, но стараются соблюдать спецификацию.

Ещё при вёрстке очень неплохо бы использовать специальный сайт, который расскажет, что и где поддерживается. Очень помогает и очищает код от всяких лишних вендорных префиксов, которые в уроках и на форумах любят иногда писать в диких количествах, в том числе и несуществующие.

Я правильно понимаю, что вам нужно что-то такое?
jsfiddle.net/egzpqoky

Значит, у вас блок, которому вы прописываете cover, скорее всего не растянут на всю ширину экрана. У меня никогда не было проблем с cover. Правда, caniuse.com/#search=background-size во вкладке issues говорит про баги cover на iOS, может быть поэтому.

Достаточно неплох вот этот скрипт, часто его использую: igor10k.github.io/ikSelect
Он легко стилизуется и хорошо дружит с кастомными скроллами, например, этим: manos.malihu.gr/jquery-custom-content-scroller
К тому же, у него есть режим отображения, аналогичного нативному, поверх всех элементов (т.е. если селект внутри контейнера с overflow: hidden, его всплывашка не обрежется).

Но это если у вас на сайте используется jQuery, конечно. Иначе придётся искать другие варианты.

Так у вас .container проставлен по ширине 540px: joxi.ru/WZUyVP3JTJBCXfGEGho , вот прокрутка и появляется.

Предполагаю, что придётся использовать событие onResize.
Как-то так (я так понимаю, data — это объект настроек карусели, туда запихнём индикатор инициализации карусели):

data.carouselInitialized = false;
$(window).on( "load.slider_portfolio resize.slider_portfolio", function(){
  if( $(window).width() > 700 ){
    if( !data.carouselInitialized ){
      $("carousel").carouFredSel(
         .........
      );
      data.carouselInitialized = true;
    }
  }else{
    $("carousel").triggerHandler("destroy"); // По идее, т.к. это просто триггер события, если карусель не создана, ошибки никакой быть не должно
    data.carouselInitialized = false;
  }
});

Приведённый мной код может не работать, потому что он написан, просто чтобы показать идею.
Вообще, лучше всего покопаться в API слайдера: docs.dev7studios.com/jquery-plugins/caroufredsel-a...

А ещё советую для таких вещей использовать карусели, предназначенные для адаптива, например, эту: owlcarousel.owlgraphic.com
Сразу множество проблем пропадёт.

Чтобы пропорционально регулировать высоту, придётся использовать либо те же vw и vh, либо padding-bottom в процентах, например так:
jsfiddle.net/yyc7vk0b

Только учитывайте, что vw и vh поддерживаются не всеми браузерами.

Вот как-то так:

myPlacemark.events.add("click", function(){
  map.setZoom( map.getZoom() + 1 );
});