Алексей Голягин

смотрите готовые шаблоны: https://themeforest.net/search?utf8=%E2%9C%93&term... .

Конкретно в вашем случае примерно вот так:

<footer>
 <div class="container-fluid">
        <div class="row footer-back">
            <div class="container">
                <div class="footer">
                    <div class="col-md-3">
                        <ul>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>

                    <div class="col-md-3">
                        <ul>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>

                    <div class="col-md-3">
                        <ul>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>

                    <div class="col-md-3">
                        <ul>
                            <li></li>
                            <li>
                                <ul class="social">
                                    <li></li>
                                    <li></li>
                                </ul>
                    </div> 
					
			    </div>
		    </div>
		</div>
		
		<div class="container-fluid">
			<p>Мы принимаем к оплате</p>
                <ul class="sale-card">
                    <li><img src="src/images/png/visa.png" alt=""></li>
                    <li><img src="src/images/png/mastercard.png" alt=""></li>
                    <li><img src="src/images/png/yandexmoney.png" alt=""></li>
                </ul>
        </div>
    </div>
</footer>

А если упростить, то вот так:

<footer class="footer-back">
 <div class="container">
  <div class="row">
   <div class="col-md-3">
    <ul>
     <li></li>
     <li></li>
    </ul>
   </div>
   <div class="col-md-3">
    <ul>
     <li></li>
     <li></li>
    </ul>
   </div>
   <div class="col-md-3">
    <ul>
     <li></li>
     <li></li>
    </ul>
   </div>
   <div class="col-md-3">
    <ul>
     <li></li>
     <li></li>
    </ul>
   </div>				
  </div><--/row-->
 </div><--/container-->
 <div class="container-fluid">
  <p>Мы принимаем к оплате</p>
  <ul class="sale-card">
    <li><img src="src/images/png/visa.png" alt=""></li>
    <li><img src="src/images/png/mastercard.png" alt=""></li>
    <li><img src="src/images/png/yandexmoney.png" alt=""></li>
   </ul>
 </div><--/container-fluid-->
</footer>

Ну и соответственно css под свои нужды

По идее в bootstrap и так отступы по 15px, а в сумме дают 30px.
А если вы хотите увеличить их в двое к примеру, то я бы отказался от такой вложенности как у вас, я бы пошел иным путем, просто дописал бы немного таблицу стилей, к примеру вот так:

.row.my{padding-right:30px !important;padding-left:30px !important}
.col-lg-1.my,.col-lg-10.my,.col-lg-11.my,.col-lg-12.my,.col-lg-2.my,.col-lg-3.my,.col-lg-4.my,.col-lg-5.my,.col-lg-6.my,.col-lg-7.my,.col-lg-8.my,.col-lg-9.my,.col-md-1.my,.col-md-10.my,.col-md-11.my,.col-md-12.my,.col-md-2.my,.col-md-3.my,.col-md-4.my,.col-md-5.my,.col-md-6.my,.col-md-7.my,.col-md-8.my,.col-md-9.my,.col-sm-1.my,.col-sm-10.my,.col-sm-11.my,.col-sm-12.my,.col-sm-2.my,.col-sm-3.my,.col-sm-4.my,.col-sm-5.my,.col-sm-6.my,.col-sm-7.my,.col-sm-8.my,.col-sm-9.my,.col-xs-1.my,.col-xs-10.my,.col-xs-11.my,.col-xs-12.my,.col-xs-2.my,.col-xs-3.my,.col-xs-4.my,.col-xs-5.my,.col-xs-6.my,.col-xs-7.my,.col-xs-8.my,.col-xs-9.my{padding-right:30px !important;padding-left:30px !important}

И получил бы обычную разметку без лишней вложенности:

<div class="container">
   <div class="row my">
        <div class="col-md-8 my">
             <p>test</p>
        </div>
        <div class="col-md-4 my">
              <p>test</p>
         </div>
    </div>
</div>

Преимущество:
Меньшая вложенность и легче управлять CSS, допустим я считаю что на планшете или мобильном отступы в 30рx это через чур, следовательно приведенный мной CSS который находится выше , заключаем в

@media (min-width:769px){
CSS код
}

Тогда на экране более 768px отступы будут по 30px, а на более мелких экранах стандартные по 15

Попробуйте так:

@media only screen and (min-width : 768px) and (max-width : 1024px) {
  .head {
    width: 100%;
    height: 57%;
    background-image: none;
  }

Так же проверьте, может есть стили которые ниже этого правила, они перекрывают его

Если есть желание создать нормальный блог, то MODX Revolution, придется позаморачиваться немного) Либо всеми заюзаный вордпресс)