CSS Float set to right but floating left [duplicate]

Question

On this page: http://sneakersinsight.com/xml/adidas-nmd_xr1

As you can see the twitter feed is sitting right next to the photo where as I am trying to get it to float to the right side of the page with the same spacing as the photo has to the left.

The twitter feed's css looks like this:

.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;}

The left photo's css looks like this:

.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;}

They're both contained in a div, of which the css is:

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

Please let me know if you need any other information to help.

Thanks!

Answer 1

It's because the parent has:

display: flex;

Remove the display: flex, which also answers why float wasn't applied to the either children.

You need to remove the flex in two areas for .preview-wrapper. Both are in http://sneakersinsight.com/css/styles.css on line 262. For some reason, it's not two, but your stylesheet is being loaded twice. Please check that as well.