index page not displaying in springboot thymleaf layout dialect - spring-boot

Question

I posted a question few days ago about jquery code not working in a thymeleaf template as expected. I am able to do it without using jquery but it has generated another problem and I need help. I cant display index.html and below is code sample
stylecss file
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
box-sizing: border-box;
font-family: 'Roboto',sans-serif;;
}
.wrapper .header{
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 30px;
background: #23242b;
color: #fff;
}
.wrapper .u-name{
font-size: 20px;
padding-left: 17px;
}
.wrapper .u-name span{
color: #127b8e;
font-weight:bold;
}
.wrapper .header i{
font-size: 30px;
cursor: pointer;
color: #fff;
}
.wrapper .header i:hover{
color: #127b83;
}
/* .wrapper .user-p{
text-align: center;
padding-left: 10px;
padding-top: 25px;
}
.wrapper .user-p img{
width: 100px;
border-radius: 50%;
} */
.wrapper .user-p h4{
color: #ccc;
padding: 5px 0;
}
.wrapper .side-bar{
width: 300px;
background: #262931;
min-height: 100vh;
transition: 500ms width;
}
.wrapper .sidebarmenu{
display: flex;
position:absolute;
}
.wrapper .section-1{
width: 100%;
background: url("./img/bg.jpg");
background-size: cover;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.wrapper .side-bar ul{
margin-top: 20px;
list-style: none;
}
.wrapper .side-bar ul li{
font-size: 18px;
padding: 15px 0px;
padding-left: 20px;
transition: 500ms background;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wrapper .side-bar ul li:hover{
background: #127b8e;
}
.wrapper .side-bar ul li a{
text-decoration: none;
color: #eee;
cursor: pointer;
letter-spacing: 1px;
}
part of the css code
.wrapper .side-bar ul li a i{
display: inline-block;
padding-right: 10px;
font-size: 23px;
}
.wrapper #navbtn{
display: inline-block;
margin-left: 70px;
font-size: 20px;
transition: 500ms color;
}
.wrapper #checkbox{
display: none;
}
/*hides and show the sidebar */
.wrapper #checkbox:checked ~ .sidebarmenu .side-bar{
width: 60px;
}
.wrapper #checkbox:checked ~ .sidebarmenu .side-bar .user-p{
visibility: hidden;
}
.wrapper #checkbox:checked ~ .sidebarmenu .side-bar a span{
display: none;
}
.wrapper #checkbox:checked ~ .sidebarmenu .side-bar ul li label{
display: none;
}
.wrapper #A{
display: none;
}
.wrapper #A:checked ~ ul{
display: block;
}
.wrapper .side-bar ul li i{
padding-right: 10px;
font-size: 23px;
color: #eee;
}
.wrapper .side-bar ul li label{
color: #eee;
}
.wrapper .side-bar ul li label i{
float: right;
padding-top: 2px;
}
.wrapper .side-bar ul li ul li{
line-height: 5px;
font-size: 14px;
padding-left: 50px;
}
.wrapper .side-bar ul li ul li:hover{
padding-left: 52px;
}
.wrapper .side-bar ul li ul{
display: none;
}
header html file contains the whole menu navigation bar
<header>
<div class="wrapper">
<input type="checkbox" id="checkbox">
<header class="header">
<h2 class="u-name">ECC <span>Soft</span>
<label for="checkbox">
<i id="navbtn" class="fa fa-bars"></i>
</label>
</h2>
<i class="fas fa-user" aria-hidden="true" ></i>
</header>
<div class="sidebarmenu">
<nav class="side-bar">
<!-- <div class="user-p">
<img src="img/sprofile.jpg" alt="">
<h4>Peter</h4>
</div> -->
<ul>
<li>
<a href="#">
<i class="fa fa-desktop" aria-hidden="true"></i>
<span>Dashboard</span>
</a>
</li>
<li>
<input type="checkbox" id="A">
<i class="far fa-envelope" aria-hidden="true"></i>
<label for="A">
<span>Message</span>
<i class="fas fa-caret-down"></i>
</label>
<ul>
<li>UI/UX Designer </li>
<li>UI Designer </li>
<li>UX Designer </li>
</ul>
</li>
<li>
<a href="#">
<i class="far fa-comment" aria-hidden="true"></i>
<span>Comments</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-info-circle" aria-hidden="true"></i>
<span>About</span>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-cog" aria-hidden="true"></i>
<span>Settings</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-power-off" aria-hidden="true"></i>
<span>Logout</span>
</a>
</li>
</ul>
</nav>
</div>
main layout file
<!DOCTYPE html>
<html xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
<!-- webjars and static resources referencing -->
<link rel="stylesheet" href="../../static/css/style.css"
th:href="#{css/style.css}" />
<link th:rel="stylesheet" th:href="#{/webjars/font-awesome/5.15.2/css/all.css}">
<link th:rel="stylesheet" th:href="#{/webjars/bootstrap/4.5.0/css/bootstrap.min.css}">
<script type="text/javascript" th:src="#{/webjars/jquery/3.5.1/jquery.js}"></script>
<script type="text/javascript" th:src="#{/webjars/bootstrap/4.5.0/js/bootstrap.js}"></script>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
body of main layout file
<body>
<div th:replace="fragments/header::header"></div>
<div layout:fragment="content">
</div>
<div th:replace="fragments/footer::footer"></div>
</body>
</html>
index html file. This is the file am battling with.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{fragments/main_layout}">
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<div layout:fragment="content" class="container">
<div class="card">
<p>Thank you for using ecc soft</p>
</div>
</div>
</body>
</html>