Как переопределить заполнение: 0;от нахальства?

Question

Я сейчас работаю над нижним колонтитулом моего сайта и пытаюсь сделать его отзывчивым.Всякий раз, когда размер экрана становится меньше 992 пикселей, я выполнял медиазапрос, поэтому содержимое нижнего колонтитула центрировалось внутри нижнего колонтитула.Перед изменением размера у меня есть столбец, в который я добавляю отступ: 0;на.

Моя проблема в том, что мне нужно убрать этот отступ для центрирования моего контента, но он мне нужен для нижнего колонтитула нормального размера.Как я могу переопределить отступ: 0;чтобы я мог центрировать свой контент?

Код для нормального нижнего колонтитула:

.social-media {
    margin-bottom: 50px;

    > ul {
      padding: 0;
      list-style: none;

      > li {
        > a {
        padding-right: 20px;
        float: left;
        color: #ffffff;
        }
      }
  }
}

Код для маленького нижнего колонтитула:

@media screen and (max-width: 992px) {
  .social-media {
    margin-bottom: 0;
    height: auto;
    width: auto;

        > ul {
      list-style: none;
      text-align:center;

      > li {
                padding-left: 10px;
                padding-right: 10px;

                > a {}
            }
      }

  }
}

Код для моего столбца начальной загрузки:

<div class="col-lg-3 offset-lg-6 social">
  <div class="social-media">
    <ul class="nav-items">
      <li class="nav-item" :key="index" v-editable="item" v-for="(item, index) in $store.state.settings.footer_nav">
        <LinkType class="nav-link" :link="item.link" :linkText="item.name">{{ item.name }}</LinkType>
      </li>
    </ul>
  </div>
</div>

Я надеюсь, что кто-то может помочь мне с этой проблемой.Я застрял на этом некоторое время.

Answer 1

Вы можете использовать «важное» для принудительного применения свойств CSS.

.social-media
{
margin-bottom: 50px;

> ul
{
  padding: 10px !important;
  list-style: none;

  > li
  {

    > a
    {
    padding-right: 20px;
    float: left;

    color: #ffffff;
     }
   }
    }
 }

@media screen and (max-width: 992px) {

               .social-media
                {

                    margin-bottom: 0;

                    height: auto;
                    width: auto;

                    > ul
                    {
                        list-style: none;

                        text-align:center;

                        > li
                        {
                            padding-left: 10px;
                            padding-right: 10px;

                            > a
                            {

                            }
                        }
                    }

 }