Выровнять контейнер

Question

Я пытаюсь выровнять гибкий контейнер справа от блока, в котором он находится.

Я использую Magento 2.2.3

Контейнер, в котором он находится, имеет следующий набор:

box-sizing: border-box;
margin-left: auto;
margin-right: auto;
max-width: 1280px;
padding-left: 20px;
padding-right: 20px;
width: auto;
}

мой гибкий контейнер и его div.

#kidsaw-social-links {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-end;
background-color: red;
}

#kidsaw-social-links > div {
width: auto;
height: auto;
border: 1px dashed red;
}

У меня уже есть вышеуказанный набор, и я попытался поиграться с различными вещами, которые яЯ вижу на Google, но не повезло.

Если я задаю ширину для # kidsaw-social-links, это работает, но при сжатии моего веб-браузера оно не масштабируется для мобильных устройств.

   .page-bottom, .footer .content {
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    max-width: 1280px;
    padding-left: 20px;
    padding-right: 20px;
    width: auto;
   }
    #kidsaw-social-links {
	  display: flex;
	  flex-direction: row;
	  flex-wrap: nowrap;
	  justify-content: flex-end;
	  background-color: red;
  }
    #kidsaw-social-links > div {
	   width: auto;
	   height: auto;
	   border: 1px dashed red;
   }
    #kidsaw-footer {
    display: flex; 
    flex-direction: row; 
    flex-wrap: nowrap; 
    justify-content: space-between;
   }
   #kidsaw-footer > div {
    width: auto; 
    height: auto; 
    padding: 10px;
   }
   #kidsaw-footer > ul {
   list-style-type: none;
   padding-left: 20px;
   }
   

<div class="page-bottom">

<div id ="kidsaw-social-links">

<div><img title="Like us on Facebook" src="http://i.cubeupload.com/1Iy3Xm.jpg" alt="Like us on Facebook" width="68" height="76"></div>
<div><img title="Like us on Facebook" src="http://i.cubeupload.com/1Iy3Xm.jpg" alt="Like us on Facebook" width="68" height="76"></div>
<div><img title="Like us on Facebook" src="http://i.cubeupload.com/1Iy3Xm.jpg" alt="Like us on Facebook" width="68" height="76"></div>
<div><img title="Like us on Facebook" src="http://i.cubeupload.com/1Iy3Xm.jpg" alt="Like us on Facebook" width="68" height="76"></div>
<div><img title="Like us on Facebook" src="http://i.cubeupload.com/1Iy3Xm.jpg" alt="Like us on Facebook" width="68" height="76"></div>

</div>

<div class="footer content">

<div id="kidsaw-footer">

<div>
<h2>Store Information</h2>
<ul>
<li><a href="/">Homepage</a></li>
<li><a href="/">About Us</a></li>
</ul>
</div>
<div>

<h2>Support</h2>
<ul>
<li><a href="/">Contact Us</a></li>
<li><a href="/">Customer Service</a></li>
<li><a href="/">Orders and Returns</a></li>
<li><a href="/">Privacy and Cookie Policy</a></li>
</ul>
</div>

<div>
<h2>Store Tools</h2>
<ul>
<li><a href="/">Advanced Search</a></li>
<li><a href="/">Search Terms</a></li>
</ul>
</div>

</div>
</div>

Answer 1

В вашем случае вы можете выбрать 1 из 2 способов. Первый, который добавляет 100% ширины к flex-контейнеру и justify-content к flex-end;

#kidsaw-social-links {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  background-color: red;
}

и второй просто добавить поле слева: авто; поле справа: 0; в ваш контейнер