diff --git a/layouts/partials/about.html b/layouts/partials/about.html
index f4f542b..e4c9305 100644
--- a/layouts/partials/about.html
+++ b/layouts/partials/about.html
@@ -1,5 +1,5 @@
 <div class="container anchor p-md-5" id="{{ replace (lower .section.name) " " "-" }}">
-  <div id="about">
+  <div id="about-template">
     <div class="row pt-sm-2 pt-md-4 align-self-center">
       <!-- summery -->
       <div class="col-md-6">
diff --git a/layouts/partials/achievements.html b/layouts/partials/achievements.html
index 599d6cf..c86577c 100644
--- a/layouts/partials/achievements.html
+++ b/layouts/partials/achievements.html
@@ -1,5 +1,5 @@
 <div class="container-fluid anchor pb-5" id="{{ replace (lower .section.name) " " "-" }}">
-  <div id="achievements">
+  <div id="achievements-template">
     <h1 class="text-center">{{ .section.name }}</h1>
     <div class="container">
       <div class="row" id="gallery">
diff --git a/layouts/partials/experiences.html b/layouts/partials/experiences.html
index 2ae5a93..2110004 100644
--- a/layouts/partials/experiences.html
+++ b/layouts/partials/experiences.html
@@ -1,5 +1,5 @@
 <div class="container-fluid anchor pb-5" id="{{ replace (lower .section.name) " " "-" }}">
-  <div id="experiences">
+  <div id="experiences-template">
     <h1 class="text-center">{{ .section.name }}</h1>
 
     <div class="container timeline text-justify">
diff --git a/layouts/partials/projects.html b/layouts/partials/projects.html
index 4057efe..1dbb494 100644
--- a/layouts/partials/projects.html
+++ b/layouts/partials/projects.html
@@ -1,5 +1,5 @@
 <div class="container-fluid anchor pb-5" id="{{ replace (lower .section.name) " " "-" }}">
-  <div id="projects">
+  <div id="projects-template">
     <h1 class="text-center">{{ .section.name }}</h1>
     <div class="container ml-auto text-center">
       <div class="btn-group flex-wrap" role="group" id="project-filter-buttons">
diff --git a/layouts/partials/recent-posts.html b/layouts/partials/recent-posts.html
index 649a20f..b7d4e42 100644
--- a/layouts/partials/recent-posts.html
+++ b/layouts/partials/recent-posts.html
@@ -1,5 +1,5 @@
 <div class="container-fluid anchor pb-5" id="{{ replace (lower .section.name) " " "-" }}">
-  <div id="recent-posts">
+  <div id="recent-posts-template">
     <h1 class="text-center">{{ .section.name }}</h1>
     <div class="container">
       <div class="row" id="recent-post-cards">
diff --git a/layouts/partials/skills.html b/layouts/partials/skills.html
index b762052..205bb60 100644
--- a/layouts/partials/skills.html
+++ b/layouts/partials/skills.html
@@ -1,5 +1,5 @@
 <div class="container-fluid anchor pb-5" id="{{ replace (lower .section.name) " " "-" }}">
-  <div id="skills">
+  <div id="skills-template">
     <h1 class="text-center">{{ .section.name }}</h1>
     <div class="container d-flex-block">
       <div class="row" id="primary-skills">
diff --git a/static/assets/css/achievements.css b/static/assets/css/achievements.css
index aa75925..9745e49 100644
--- a/static/assets/css/achievements.css
+++ b/static/assets/css/achievements.css
@@ -1,4 +1,4 @@
-#achievements .container {
+#achievements-template .container {
   padding-top: 0.5rem;
 }
 
diff --git a/static/assets/css/projects.css b/static/assets/css/projects.css
index 1c6c1a2..86deda9 100644
--- a/static/assets/css/projects.css
+++ b/static/assets/css/projects.css
@@ -1,10 +1,10 @@
-#projects .card .card-header {
+#projects-template .card .card-header {
   background-color: #f9fafc;
   padding: 0.7rem;
   padding-bottom: 0rem;
 }
 
-#projects .card .card-img-xs {
+#projects-template .card .card-img-xs {
   margin-right: 0.5rem;
 }
 
@@ -15,11 +15,11 @@
   float: right;
 }
 
-#projects .card .card-body {
+#projects-template .card .card-body {
   padding: 0.7rem;
 }
 
-#projects .card .card-header .sub-title {
+#projects-template .card .card-header .sub-title {
   color: #8392a5;
   margin-top: 0.4rem;
 }
@@ -55,7 +55,7 @@
 /* Small devices (landscape phones, 576px and up) */
 
 @media only screen and (max-width: 576px) {
-  #projects .btn {
+  #projects-template .btn {
     margin-top: 0.3125rem;
   }
 }
diff --git a/static/assets/css/recent-posts.css b/static/assets/css/recent-posts.css
index d2f098a..35b9fc8 100644
--- a/static/assets/css/recent-posts.css
+++ b/static/assets/css/recent-posts.css
@@ -1,19 +1,19 @@
-#recent-posts .container{
+#recent-posts-template .container{
   padding-top: 1rem;
 }
 
-#recent-posts .card .card-footer span {
+#recent-posts-template .card .card-footer span {
   font-size: 10pt;
   color: #6c757d !important;
   padding-top: 5px;
 }
 
-#recent-posts .card .card-footer {
+#recent-posts-template .card .card-footer {
   background: #fff;
   margin-top: auto;
 }
 
-#recent-posts .post-card-link{
+#recent-posts-template .post-card-link{
   text-decoration: none;
 }
 
diff --git a/static/assets/css/skills.css b/static/assets/css/skills.css
index a197c52..d3dae1f 100644
--- a/static/assets/css/skills.css
+++ b/static/assets/css/skills.css
@@ -1,4 +1,4 @@
-#skills .card .card-head {
+#skills-template .card .card-head {
   background-color: #f9fafc;
   height: fit-content;
   padding: 0.7rem;
@@ -6,16 +6,16 @@
   border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.125);
 }
 
-#skills .card .card-img-xs {
+#skills-template .card .card-img-xs {
   margin-right: 0.5rem;
 }
 
-#skills .card {
+#skills-template .card {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
 
-#skills .card .card-body {
+#skills-template .card .card-body {
   padding-top: 0.2rem;
   padding-left: 0.7rem;
 }
diff --git a/static/assets/css/style.css b/static/assets/css/style.css
index 7e1a022..1662e09 100644
--- a/static/assets/css/style.css
+++ b/static/assets/css/style.css
@@ -250,10 +250,10 @@ img.right{
     padding-right: 5px;
   }
 
-  #skills,
-  #projects,
-  #recent-posts,
-  #achievements{
+  #skills-template,
+  #projects-template,
+  #recent-posts-template,
+  #achievements-template{
     padding-left: 0;
     padding-right: 0;
   }