centered position logo

app/assets/scss/modules/_btn.scss

@@ -0,0 +1,17 @@
+.btn{
+	background-color: #00ab00;;
+	color: #fff;
+	text-decoration: none;
+	padding: .75rem 1.2rem;
+	display: inline-block;
+
+	&--large {
+		padding: 1.1rem 1.9rem;
+
+		@include atSmall(){
+			font-size: 1.25rem;
+		}
+	}
+
+
+} 

app/assets/scss/modules/_site-header.scss

@@ -11,6 +11,7 @@
 
 	&__btn-container{
 		@include atMedium(){
+			padding: 32px 0px 32px 0px;
 			float: right;
 		}
 	}
@@ -34,7 +35,7 @@
 
 	&__logo{
 		position: absolute;
-		top: 0;
+		top: 3px;
 		left: 50%;
 		transform-origin: 50% 0%;
 		transform: translateX(-50%) scale(.8);

app/assets/scss/style.scss

@@ -7,6 +7,6 @@
 @import './modules/primary-nav';
 @import './modules/wrapper';
 @import './modules/large-hero';
-
+@import './modules/btn';
 
 

app/index.html

@@ -15,7 +15,7 @@
 	<header class="site-header">
 		<div class="wrapper">
 			<div class="site-header__logo">
-				<a href="#"><img src="./assets/media/images/bbb_logo_white.png" alt="BBB logo"></a>
+				<img src="./assets/media/images/bbb_logo_white.png" alt="BBB logo">
 			</div>
 
 			<div class="site-header__menu-content">
@@ -44,7 +44,7 @@
 			<h1 class="large-hero__title">bio bulke bende</h1>
 			<h2 class="large-hero__subtitle">Organic autonomous foodcoop.</h2>
 			<p class="large-hero__description">Good quality, delicious food from local suppliers and farmers. Located in Almondestraat 157, <b>bio bulk bende</b> is the first food co-op in Rotterdam. </p>
-			<p><a href="#" class="btn">Join us!</a></p>
+			<p><a href="#" class="btn btn--large">Join us!</a></p>
 		</div>
 	</div>
 

app/temp/styles/style.css

@@ -339,6 +339,7 @@ img {
       background-color: rgba(0, 0, 0, 0.4); } }
   @media (min-width: 800px) {
     .site-header__btn-container {
+      padding: 32px 0px 32px 0px;
       float: right; } }
   .site-header__menu-content {
     opacity: 0;
@@ -356,7 +357,7 @@ img {
         transform: scale(1); } }
   .site-header__logo {
     position: absolute;
-    top: 0;
+    top: 3px;
     left: 50%;
     transform-origin: 50% 0%;
     transform: translateX(-50%) scale(0.8);
@@ -467,4 +468,16 @@ img {
       .large-hero__description {
         font-size: 1.875rem; } }
 
+.btn {
+  background-color: #00ab00;
+  color: #fff;
+  text-decoration: none;
+  padding: .75rem 1.2rem;
+  display: inline-block; }
+  .btn--large {
+    padding: 1.1rem 1.9rem; }
+    @media (min-width: 530px) {
+      .btn--large {
+        font-size: 1.25rem; } }
+
 /*# sourceMappingURL=style.css.map */