Merge branch '24070-project-margins' into 'master'

Resolve "Margins look weird in Project page with pinned sidebar in project stats bar"

## What does this MR do?
Fixes the margins of the project buttons in small screens and when the sidebar is pinned.

Both top and left margin were not aligned with the rest of the page.

## Screenshots (if relevant)
![Screen_Shot_2016-11-18_at_16.39.01](/uploads/9213cbbfba5fd4a57716c09d1807d2ea/Screen_Shot_2016-11-18_at_16.39.01.png)
![margins](/uploads/86bfad4fb48e67224e8bc8f9b8e38520/margins.gif)

## Does this MR meet the acceptance criteria?

- [x] [Changelog entry](https://docs.gitlab.com/ce/development/changelog.html) added
- [ ] [Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md)
- [ ] API support added
- Tests
  - [ ] Added for this feature/bug
  - [ ] All builds are passing
- [x] Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html)
- [x] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [x] Branch has no merge conflicts with `master` (if it does - rebase it please)
- [x] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

## What are the relevant issue numbers?
Closes #24070

See merge request !7580

app/assets/stylesheets/pages/projects.scss

@@ -145,6 +145,10 @@
   }
 }
 
+.nav > .project-repo-buttons {
+  margin-top: 0;
+}
+
 .project-repo-buttons,
 .group-buttons {
   margin-top: 15px;
@@ -184,6 +188,12 @@
     margin-left: 10px;
   }
 
+  .download-button {
+    @media (max-width: $screen-lg-min) {
+      margin-left: 0;
+    }
+  }
+
   .count-buttons {
     display: inline-block;
     vertical-align: top;
@@ -468,6 +478,20 @@ a.deploy-project-label {
   }
 }
 
+.page-sidebar-pinned {
+  .project-stats .nav > li.right {
+    @media (min-width: $screen-lg-min) {
+      float: none;
+    }
+  }
+
+  .download-button {
+    @media (min-width: $screen-lg-min) {
+      margin-left: 0;
+    }
+  }
+}
+
 .project-stats {
   font-size: 0;
   border-bottom: 1px solid $border-color;
@@ -485,9 +509,11 @@ a.deploy-project-label {
     }
 
     &.right {
-      @media (min-width: $screen-md-min) {
+      vertical-align: top;
+      margin-top: 0;
+
+      @media (min-width: $screen-lg-min) {
         float: right;
-        margin-top: 0;
       }
     }
   }

changelogs/unreleased/24070-project-margins.yml

+---
+title: Fix Margins look weird in Project page with pinned sidebar in project stats bar
+merge_request: 7580
+author: