CSS Float к правому краю, но плавающий влево

Question

На этой странице: http://sneakersinsight.com/xml/adidas-nmd_xr1

Как вы можете видеть, что Твиттер сидит прямо рядом с фотографией, где, как я пытаюсь заставить его всплыть на правую сторону с тем же интервалом, что и фотография слева.

КАС, Твиттера выглядит следующим образом:

.preview-twitter { 
margin: 0; 
padding: 0; 
position: relative; 
float: right; 
right:0; 
margin-top: 5%; 
margin-bottom: 3%; 
width: 40%; 
padding-top: 1%; 
padding-bottom: 1.38%; 
display: inline-block; 
background: #373737;} 

CSS фотографии слева выглядит следующим образом:

.item-preview { 
position: relative; 
margin-top: 5%; 
margin-bottom: 3%; 
left: 4%; 
width: 40%; 
border: 10px solid #373737; 
border-width: -moz-calc(50% - 10px); 
border-width: -webkit-calc(50% - 10px); 
border-width: calc(50% - 10px); 
display: inline-block; 
padding: 0;} 

Они оба содержат в DIV, из которых КСС:

.preview-wrapper { 
display: flex; 
position: relative; 
overflow: auto; 
max-height: 42vw; 
min-height: 42vw;} 

Пожалуйста, дайте мне знать, если вам нужна какая-либо другая информация.

Спасибо!

Answer 1

Это потому, что родитель имеет:

display: flex; 

Снимите display: flex, который также отвечает почему float не была применена к либо детей.

Вы должны удалить flex в двух областях для .preview-wrapper. Оба находятся в http://sneakersinsight.com/css/styles.css на линии 262. По какой-то причине это не два, но ваша таблица стилей загружается дважды. Пожалуйста, проверьте это.