Антон Романов

В вашем вопросе вы не учли самый главный нюанс, все зависть от дизайна приложения, если все делать по канонам, то есть сначала сделать ui guide всех элементов что нарисовал дизайнер, смотря на гайд можно сразу понимать все отступы и все размеры кнопок и сразу разметить нужные модификаторы для кнопок, а потом только использовать по мере надобности!

Смотря с какой стороны посмотреть, конечно лучше сразу учесть отступы и размеры кнопок задавать с помощью модификаторов, также я рекомендую забыть про px а использовать глобально rem и если надо локально то em!

Вот смотри с одного из проектов:

.button {
  &--sm {
    height: $btn-size-sm;

    padding: 0 rem(20);

    font-size: $btn-size-sm-fn;
    line-height: $btn-size-sm - rem(2);
  }

  &--xs {
    height: $btn-size-xs;

    padding: 0 rem(20);

    font-size: $btn-size-xs-fn;
    line-height: $btn-size-xs - rem(2);
  }

  &--full {
    width: 100% !important;
  }

  &--s150 {
    min-width: rem(150) !important;
  }

  &--s220 {
    width: rem(220) !important;

}

Почему rem или em, потому что они еще позволяют легко менять пропорции если это надо к примеру на маленьких экранах не все влезло:

html {
  font-family: $font-family-primary;
  font-size: 16px;
  font-weight: normal;
  text-align: left;
  line-height: normal;
  letter-spacing: normal;

  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  @media (max-width: 992px) {
    font-size: 15px;
  }

  @media (max-width: 760px) {
    font-size: 14px;
  }

  @media (max-width: 380px) {
    font-size: 13px;
  }
}

1.Здравствуйте,что касается 1 вопроса, задавать можно и к body и к отдельному элементу,зависит от цели, если хочешь чтобы сайт перестал уменьшаться при достижении конкретного размера пиши для body,если такое действие требуется для отдельного элемента то задавайте для него.
2. Это резиновый дизайн и для него требуется задавать всё в процентах,задавайте height:100% для контейнера в котором находиться элемент,если это и есть контейнер содержащий ещё контейнеры,то задав для него height:100%,он и так будет на весь экран,так-как родитель для него body.
3. Задавайте отступы в процентах или в других относительных единицах ,верстка же резиновая.
4. Задайте для flex-контейнеров :

flex-wrap:wrap;
flex-direction:row;
judtify-content:space-between;

>
Вроде все,кстати неплохо было-бы вам прочитать про такие единицы как: vh, vw, vmin, vmax

https://codepen.io/anon/pen/pqWBJd?editors=1100

Контейнеру, где находится менюшка и социалки, задайте

display: flex;
justify-content: space-between;
align-items: center;

что за извращения?
есть более верные решения
float(left, right)
flex
grid

Что касается этого:

btn {
border: 0px solid #000000;
width: 160px;
color: #ffffff; /* The color of text in button - WHY DOESN'T IT WORK?*/
text-decoration: none; /* The link style in button - WHY DOESN'T IT WORK?*/
background: #FBD840;
padding: 12px;
text-align: center;
margin-bottom: 30px;
border-radius: 3px;
box-shadow: 0px 3px 15px 3px rgba(249,219,91,0.4);
cursor: pointer;

Селектор! Если вы имели ввиду класс btn, то класс обозначаем в таком формате: .btn{...}
Если же вы имели ввиду сам тег , то писать нужно полное название тега
button{...}

Если я чего то не понял, то давайте ка ссылку на песочницу свою