I've encountered a peculiar issue while attempting to specify the width for my search bar. Below is a snippet of my HTML code.
<header class="header-main">
<div class="header-main-logo">
<a href="index.php" class="logo">LOGO</a>
</div>
<div class="search-container">
<form method="get" action="search.php?page" class="search-form">
<input class="search-bar" type="search" name="query" value='<?php echo isset($_GET["query"]) ? trim($_GET["query"]) : "" ?>' placeholder="Search">
<div class="search-btn">
<input type="hidden" name="page" value="1">
<button type="submit" name="search" value="1">Search</button>
</div>
</form>
</div>
</header>
Here's my CSS code:
.header-main {
box-sizing: border-box;
width: 100%;
height: 60px;
background-color: rgb(107, 23, 23);
display: flex;
justify-content: space-between;
}
.search-container {
box-sizing: border-box;
width: 50%;
height: 100%;
background-color: rgb(51, 52, 59);
display: flex;
align-content: center;
}
.search-container .search-bar {
box-sizing: border-box;
border: 1px solid rgb(60, 255, 0);
height: 40px;
width: 100% !important;
cursor: text;
font-size: 14px;
font-weight: 600;
font-family: Arial, Helvetica, sans-serif;
color: rgb(0, 0, 0);
background-color: rgb(248, 248, 248);
align-self: center;
}
Whenever I set the width in .search-container .search-bar to 100%, it doesn't seem to take effect. However, specifying a value like 400px works as expected. My aim is to have it in percentage so it adapts dynamically to the page size.
I initially thought it was a matter of setting the width on the HTML element. My goal is for the Search bar to span the entire width of its parent container, the search container.