diff --git a/src/components/app.jsx b/src/components/app.jsx
index 40ae5bf..f6962e5 100644
--- a/src/components/app.jsx
+++ b/src/components/app.jsx
@@ -85,10 +85,13 @@ function App(props) {
   return (
     <div>
       <TopBar />
-      <SearchBar onSearchChange={debouncedSearch} />
-      <SeasonDropdown selected={selectedSeason}
-        onChange={handleSeasonSelect}
-      />
+      <div id="header-stuff">
+        <SearchBar onSearchChange={debouncedSearch} />
+        <SeasonDropdown selected={selectedSeason}
+          onChange={handleSeasonSelect}
+        />
+      </div>
+
       <div id="landing-container">
         <RecipeDetail recipe={selectedRecipe} marketsPromise={markets} />
         <RecipeList onRecipeSelect={(selection) => setRecipe(selection)} recipes={recipes} />
diff --git a/src/style.scss b/src/style.scss
index 290a0fe..a1f3996 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -87,15 +87,13 @@ body, html {
   }
 
   #dropdown {
-    position: fixed;
     font-size: 1rem;
     border: solid 2px $dark-color;
     border-bottom: solid 5px $dark-color;
     border-radius: 3px;
     color: $dark-color;
-    top: 10vh;
     height: 5vh;
-    right: 40%;
+    margin-left: 10%;
     display: flex;
     flex-direction: row;
     justify-content: center;
@@ -108,12 +106,17 @@ body, html {
     color: blue;
   }
 
-  #search-bar {
+  #header-stuff {
     position: fixed;
     top: 10vh;
     left: 5%;
     display: flex;
     flex-direction: row;
+  }
+
+  #search-bar {
+    display: flex;
+    flex-direction: row;
     justify-content: center;
     margin-top: 2%;
     margin-bottom: 5%;
@@ -132,7 +135,7 @@ body, html {
     border-bottom: solid 5px $dark-color;
     background: $accent-color;
     height: 4vh;
-    width: 34vw;
+    width: 30vw;
 
     color: #322E60;
     font-family: 'Nunito', sans-serif;