diff --git a/js/components/ascribe_detail/media_container.js b/js/components/ascribe_detail/media_container.js
index 81eac800..d62b0b84 100644
--- a/js/components/ascribe_detail/media_container.js
+++ b/js/components/ascribe_detail/media_container.js
@@ -90,6 +90,11 @@ let MediaContainer = React.createClass({
                     extraData={extraData}
                     encodingStatus={this.props.content.digital_work.isEncoding} />
                 <p className="text-center">
+                    <span className="ascribe-social-button-list">
+                        <FacebookShareButton />
+                        <TwitterShareButton />
+                    </span>
+
                     <AclProxy
                         show={['video', 'audio', 'image'].indexOf(mimetype) === -1 || this.props.content.acl.acl_download}
                         aclObject={this.props.content.acl}
@@ -98,8 +103,6 @@ let MediaContainer = React.createClass({
                             Download <Glyphicon glyph="cloud-download"/>
                         </Button>
                     </AclProxy>
-                    <FacebookShareButton />
-                    <TwitterShareButton />
                     {embed}
                 </p>
             </div>
diff --git a/sass/ascribe_social_share.scss b/sass/ascribe_social_share.scss
index 04703b96..0a577fb6 100644
--- a/sass/ascribe_social_share.scss
+++ b/sass/ascribe_social_share.scss
@@ -1,7 +1,10 @@
+.ascribe-social-button-list {
+    margin-right: 10px;
+}
+
 .btn-ascribe-social {
     height: 20px;
     width: 56px;
     box-sizing: content-box;   /* We want to ignore padding in these calculations as we use the sdk buttons' height and width */
-    margin-left: 5px;
     padding: 1px 0;
 }