HTML tag is not filling width of screen with css even with width:100%

Question

I have the below HTML code:

<form class="form" action="search.php" method="POST">
    <input type="text" id="searchBox" name="name" placeholder="Enter name" oninput="search(this.value)">
</form>

I want this form to span out the whole width of the window. I am doing this with css below:

.form{
  display: block;
  float:left;
  width: 100%;
  height: 40px;
  background-color: yellow;
  border:none;
}

However, it is not going the full width. It is leaving a small margin on both sides.

<form> is contained in <body> with the followinCSSss:

body{
  background-attachment: fixed;
  background-size: 1150px 950px;
  background-repeat: repeat-x;
}

It's probably not the form itself, but the element it is contained in. Perhaps the ``? But it could be the form. There's no way to tell. — KIKO Software, Jul 18 '19 at 08:08
I think it depends on your parent properties. Or if it is just plain page try giving body{margin:0;padding:0;} — Varsha Dhadge, Jul 18 '19 at 08:11
@VarshaDhadge you are right `margin:0;padding:0;` was commented out when I was testing and forgot to uncomment them. Thanks for reminding me! — bcsta, Jul 18 '19 at 08:12

score 1 · Accepted Answer · answered Jul 18 '19 at 08:14

1

Add this CSS, will work. :)

body{
margin : 0px;
padding : 0px
}

answered Jul 18 '19 at 08:14

ni3solanki

502
3
12

HTML tag is not filling width of screen with css even with width:100%

1 Answers1