all working fine

Author: mavv-coder

src/components/home.component.style.tsx

@@ -3,14 +3,20 @@ import { css } from "emotion";
 export const mytitle = css`
   font-family: "Roboto", sans-serif;
   color: indianred;
+  text-align: center;
 `;
 
 export const images = css`
-  max-width: 400px;
+  max-width: 100%;
 `;
 
 export const mainContainer = css`
   width: 100%;
   display: flex;
   justify-content: center;
 `;
+
+export const content = css`
+  width: 500px;
+  text-align: center;
+`;

src/components/home.component.tsx

@@ -4,11 +4,11 @@ import { switchRoutes } from "router/index"; // Using alias for router
 const image = require("images/godzilla.jpg"); // Using alias for image
 
 export const HomeComponent: React.FC = () => {
-  const { mytitle, images, mainContainer } = classes;
+  const { mytitle, images, mainContainer, content } = classes;
   return (
     <>
       <main className={mainContainer}>
-        <div>
+        <div className={content}>
           <h1 className={mytitle}>Hello from {switchRoutes.home} component</h1>
           <img className={images} src={image} alt="godzilla" />
         </div>

src/styles.css

@@ -17,8 +17,7 @@ module.exports = {
   },
   stats: "errors-only",
   output: {
-    filename: "[name].[chunkhash].js",
-    publicPath: "/",
+     filename: "./js/[name].[chunkhash].js",
   },
   devServer: {
     historyApiFallback: true,