sergey

Я уже четвёртый раз отвечаю на подобный вопрос:

Собсно, как делаем мы - toroid.org/ams/git-website-howto . Это процесс деплоя. В свой локальный репозиторий добавил два ремоута - prod & test. Это помимо origin, который указывает на ваш общий bare git репозиторий, на гитхабе, например. Собсно сначала выкладываю на тест одной командой
git push test master
потом, если всё хорошо, уже на прод
git push prod master
Если нужны какие-нибудь пост-обработки, то они происходят на сервере через хуки гита.

По поводу workflow. Простейший вариант - Github Flow.
Есть одна ветка, master - там всегда то, что сейчас на проде.
Чтобы сделать фичу/починить баг вы создаёте новую ветку из мастера, коммитите в неё, когда всё сделали мерджите её в мастер. Перед мерджем, понятное дело, обновите свой мастер, вдруг кто-то туда уже смерджил свою ветку с другой фичой. Хотите перед мерджем протестировать свою фичу?
git push test my-feature:master
это запушит вашу ветку на тестовый сервер.

Ой, да! И еще подскажите сайт, чтобы потом полученный PSD сам верстал и подставлял нужные мне данные, вместо исходных. Спасибо.
Откуда вы такие беретесь?
Идите на любой сайт фриланса и просите отрисовать макет по сайту. Профит.

<div class="test">
  <div class="img"></div>
</div>

.test {
  width: 800px;
  height: 200px;
  border: 10px solid #bebebe;
  border-bottom: none;
  margin: 100px auto;
  position: relative;
}
.test:after {
  content: '';
  display: block;
  width: 100%;
  height: 10px;
  background: #bebebe;
  position: absolute;
  left: 0;
  bottom: 0;
}

.img {
  width: 200px;
  height: 400px;
  background: yellow;
  margin: -100px auto 0;
}

pen

Bootstrap плагин очень просто в применении. Называется scroll Spy
bootstrap-ru.com/203/javascript.php

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

#sidebartoggler {
  display:none;
}

#sidebartoggler:checked + .page-wrap .slidebar {
  left:0;
}

Как-то так, если на скорую руку.

<style>
    .container{
        background-color: green;
        color: #ffffff;
        float: left;
        width: 100%;
    }
    .container:after {
        display: block;
        content: '';
        clear: both;
    } 
    .b {
        font-weight: bold;
        font-size: 20px;
    }
    .l {
        font-size: 15px;
    }
    li {
        float: left;
        text-align: center;
        width: 100px;
        border-left: 1px solid #fff;
        box-sizing: border-box;
    }
    li:last-child {
        border-right: 1px solid #fff;
    }
    ul {
        display: block;
        margin: auto;
        list-style-type: none;
        width: 500px;
    }
</style>
<div class="container">
    <ul>
        <li><p class="b">42</p><p class="l">Lorem</p></li>
        <li><p class="b">125</p><p class="l">Lorem</p></li>
        <li><p class="b">15</p><p class="l">Lorem</p></li>
        <li><p class="b">99</p><p class="l">lorem</p></li>
        <li><p class="b">25</p><p class="l">Lorem</p></li>
    </ul>
</div>

А в чем там проблема? Если ваша задача как верстальщик то делайте как видите, потом оптимизируйте.....

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

Ограничить максимальную ширину пресловутым 1400px, например - обычная практика. Как правило даже меньше делают.

jsfiddle.net/Affiction/7LgkpwL8