diff --git a/CHANGELOG.md b/CHANGELOG.md
index ddb19009..2b1af8f8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -156,6 +156,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 - Updated husky script to avoid warning
 - Resolved incorrect meta tag rendering for nested routes
+- Prevent horizontal page scroll caused by overflowing long titles
 
 ### Changed
 
@@ -175,6 +176,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
   - Row
   - Container
   - Wrapper
+  - Title
   - Decorations/Bracket
   - Decorations/Stick
   - TwoColumn
@@ -187,4 +189,4 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
   - about page
   - home(index) page
 - Created a combineClasses function to clean up conditional class handling
-- Rename RowAlignLeft to Row
\ No newline at end of file
+- Rename RowAlignLeft to Row
diff --git a/components/blog/BlogPostsContainer/index.js b/components/blog/BlogPostsContainer/index.js
index d6ceeaaa..5c51ce91 100644
--- a/components/blog/BlogPostsContainer/index.js
+++ b/components/blog/BlogPostsContainer/index.js
@@ -1,7 +1,6 @@
 import Link from 'next/link';
 import { BlogCardsColumns } from '@/components/containers/CardColumns/BlogCardsColumns';
 import { BlogCard } from '@/components/containers/Card/BlogCard';
-import Title from '@/components/snippets/Title';
 import RevealContentContainer from '@/components/containers/RevealContentContainer';
 import { tagToHeading } from '@/utils/blogCategories';
 import Container from '@/components/containers/Container';
@@ -28,11 +27,11 @@ const BlogPostsContainer = ({
       <section className={styles.blogContainer}>
         {heading ? (
           <Container>
-            <Title title={heading} />
+            <h2>{heading}</h2>
           </Container>
         ) : tag ? (
           <Container>
-            <Title title={tagToHeading[tag]} />
+            <h2>{tagToHeading[tag]}</h2>
           </Container>
         ) : null}
         {swipe ? (
diff --git a/components/snippets/Title.js b/components/snippets/Title.js
deleted file mode 100644
index 5f52e7ba..00000000
--- a/components/snippets/Title.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import styled from 'styled-components';
-
-export const StyledTitle = styled.h2`
-  align-self: flex-start;
-  margin: '0 auto 1rem';
-`;
-
-const Title = ({ title }) => {
-  return <StyledTitle>{title}</StyledTitle>;
-};
-
-export default Title;
diff --git a/pages/about.js b/pages/about.js
index 82388557..dfd396c5 100644
--- a/pages/about.js
+++ b/pages/about.js
@@ -1,7 +1,6 @@
 import RevealContentContainer from '@/components/containers/RevealContentContainer';
 import TwoColumn from '@/components/containers/TwoColumn';
 import { OurGoalsCardsColumns } from '@/components/containers/CardColumns/OurGoalsCardsColumns';
-import Title from '@/components/snippets/Title';
 import Wrapper from '@/components/containers/Wrapper';
 import Container from '@/components/containers/Container';
 import { Row } from '@/components/containers/Row';
@@ -94,7 +93,7 @@ export default function AboutUs() {
       </RevealContentContainer>
       <RevealContentContainer>
         <Container>
-          <Title title='Our goals' />
+          <h2>Our goals</h2>
         </Container>
         <OurGoalsCardsColumns
           cards={[
@@ -214,7 +213,7 @@ export default function AboutUs() {
       <RevealContentContainer>
         <Wrapper customClass='primary__accent'>
           <Container>
-            <Title title='Who we are' />
+            <h2>Who we are</h2>
             <Row>
               {whoWeAre.map(_ => {
                 return (
diff --git a/pages/blog/index.js b/pages/blog/index.js
index 3d03e1ea..aa3a5f04 100644
--- a/pages/blog/index.js
+++ b/pages/blog/index.js
@@ -2,7 +2,6 @@ import { useState } from 'react';
 import BlogPostsContainer from '@/components/blog/BlogPostsContainer';
 import Container from '@/components/containers/Container';
 import SearchBar from '@/components/blog/SearchBar';
-import Title from '@/components/snippets/Title';
 import { BlogSearch } from '@/components/snippets/BlogSearch';
 import { blogRevalidate } from '@/utils/config';
 import { tagToHeading } from '@/utils/blogCategories';
@@ -29,11 +28,10 @@ export default function Blog({ posts }) {
     <>
       <Container>
         <BlogSearch>
-          <Title blogTitle title={!searchTerm && 'Latest Posts'} />
+          <h2>{!searchTerm && 'Latest Posts'}</h2>
           <SearchBar setSearchTerm={setSearchTerm} />
         </BlogSearch>
       </Container>
-
       <BlogPostsContainer posts={filteredPosts} heading={heading} />
       {!searchTerm &&
         Object.keys(tagToHeading).map(tag => (
@@ -48,8 +46,10 @@ export default function Blog({ posts }) {
 }
 
 export async function getStaticProps() {
-  const PER_PAGE = 1000
-  const res = await fetch(`https://dev.to/api/articles?username=wdp&per_page=${PER_PAGE}`);
+  const PER_PAGE = 1000;
+  const res = await fetch(
+    `https://dev.to/api/articles?username=wdp&per_page=${PER_PAGE}`,
+  );
   const posts = await res.json();
 
   return {
diff --git a/styles/globals.scss b/styles/globals.scss
index 9018aa80..3b90009c 100644
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -14,3 +14,8 @@
   --dark-bg: #023047;
   --error: #be1313;
 }
+
+h2 {
+  overflow-wrap: break-word;
+  hyphens: auto;
+}