I am encountering an issue with my CSS. Although I have successfully centered everything, I am facing a problem with the hover effect in CSS. Whenever I apply the active class or hover over an li element, the background color expands to 100%. Additionally, the paragraph does not align exactly beneath the element but starts from the left side instead. Despite inspecting the code, I cannot seem to identify the root cause of this issue.
What could be causing this behavior and how can I prevent similar issues in the future?
https://i.sstatic.net/pL3ry.png
I aspire to achieve a layout similar to this: https://i.sstatic.net/MFCK1.png
In my attempt to troubleshoot, I have previewed the code and made adjustments to widths and other classes.
// JavaScript function for search filtering and accordion functionality
:root {
--main-color: #009add;
}
* {
box-sizing: border-box;
font-family: 'Century Gothic';
}
/* Various styles for different elements */
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Frequently Asked Questions:</h2>
<div class="container">
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search.." title="Search">
</div>
<ul id="myUL">
<li class="accordion"><a href="#">TITLE</a></li>
</id>
<div class="panel">
<p>Solution</p>
</div>
<li class="accordion"><a href="#">TITLE2</a></li>
<div class="panel">
<p>Solution</p>
</div>
</ul>
</div>
</body>
</html>