Main Page/style.css

/* General Styles */ body {

   font-family: Arial, sans-serif;
   background-color: #f8f9fa;
   margin: 0;
   padding: 0;

}

/* Main Container */ .content-wrapper {

   width: 100%;
   margin: auto;
   display: flex;
   flex-direction: column;

}

/* Welcome Banner */ .welcome-banner {

   clear: both;
   position: relative;
   box-sizing: border-box;
   width: 100%;
   margin: 1.2em 0 6px;
   max-width: 100%;
   border: 2px solid #333;
   background-color: #ffeb3b;
   color: #000;
   white-space: normal;
   border-radius: 8px;
   text-align: center;
   padding: 10px;

}

/* Sections */

1. mp-left, #mp-right {

   flex: 1;
   width: 100%;
   border: 2px solid #333;
   border-radius: 8px;
   padding: 0;
   background: #fafafa;
   vertical-align: top;
   color: #000;
   margin-top: 10px;

}

/* Headings */ h2 {

   margin: 0.5em;
   background: #333;
   font-family: inherit;
   font-size: 120%;
   font-weight: bold;
   color: #fff;
   padding: 0.2em 0.4em;
   border-radius: 5px;

}

/* About Section */

1. mp-creating-encyclopedia {

   clear: both;
   margin-top: 2em;
   border: 2px solid #333;
   border-radius: 8px;
   padding: 1em;
   background-color: #fafafa;
   text-align: justify;

}

/* Mobile View */ @media (min-width: 768px) {

   #mp-upper {
       flex-direction: row;
   }
   #mp-left, #mp-right {
       min-width: 48%;
   }

}