Is there a special method to specify the width of an input field in CSS without it extending beyond the container? I want my input field to be 98% of the container's width, but when I set it to that, it goes off the screen.
This is the HTML code I am using:
<div class="large-12 columns centered">
<input class="typeahead" type="text" placeholder="Start typing to search" spellcheck="false" autofocus />
</div>
And this is the CSS code I have applied:
input {
padding: 0.8rem 0.9rem;
height: inherit;
font-size: 1.25rem;
margin: 0 0 .5rem 0;
display: block;
width: 98%;
}
However, despite these settings, the input field still extends off the screen. Can anyone provide guidance on how to prevent this outcome?