I am currently utilizing unsemantic.css for my web layout. Here is a basic structure I have set up:
<div class="grid-container">
<div class="grid-65">
Insert content here
</div>
<div class="grid-35">
<select>
<option value="0">First option</option>
<option value="1">Second option</option>
</select>
</div>
</div>
My goal is to make the select box width be equal to its parent div (35% of a grid row). The default width of this element is determined by the length of its options.
I attempted the following code:
select {
width: 100%;
}
However, this did not have any effect overall. When I manually set the width to a specific value like 500px, it works fine but is not responsive.