diff --git a/src/components/hero.css b/src/components/hero.css
new file mode 100644
index 0000000..e8133b5
--- /dev/null
+++ b/src/components/hero.css
@@ -0,0 +1,5 @@
+.hero-full {
+    margin-left: -1.25em;
+    margin-right: -1.25em;
+    width: auto;
+}
\ No newline at end of file
diff --git a/src/components/hero.jsx b/src/components/hero.jsx
index ee4b548..cbb656d 100644
--- a/src/components/hero.jsx
+++ b/src/components/hero.jsx
@@ -1,7 +1,9 @@
 import React from "react"
 
+import "./hero.css"
+
 const Hero = ({bg, children}) => (
-    <div className="hero min-h-screen" style={{backgroundImage: `url(${bg})`}}>
+    <div className="hero hero-full min-h-screen" style={{backgroundImage: `url(${bg})`}}>
     <div className="hero-overlay bg-opacity-60" />
     <div className="hero-content text-center text-neutral-content">
         <div className="max-w-md">