What could be causing the first element not to align with the other elements in the container? I'm having trouble figuring out why this is happening. The code snippet seems to work, but when I implement it on the webpage, the alignment issue arises. What might be causing this unexpected behavior?
https://i.sstatic.net/i1rPT.png
.search {
background-color: #2a7a2e;
border: none;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
margin-top: 4px;
cursor: pointer;
width: 60px;
height: 20px;
}
.searchtag {
margin: 4px;
width: 100px;
height: 20px;
font-size: 12px;
}
cloudcontainer {
width: 940px;
border-style: solid;
border-width: 5px;
float: left;
}
cloudcontainer:after {
content: "";
display: table;
clear: both;
}
.tagcloud {
background-color: #2a7a2e;
border: none;
color: white;
text-align: center;
text-decoration: none;
font-size: 12px;
margin: 2px 2px 2px 2px;
cursor: pointer;
float: left;
width: auto;
height: 20px;
border-style: solid;
border-width: 1px;
}<form id="search">
<input class="searchtag" type="text" id="search" name="search">
<button class="search" type="submit" formaction="go.php"
method="GET">Search</button>
</form>
<cloudcontainer>
<form id="search"><button class="tagcloud" type="submit" formaction="go.php" method="GET">zzz</button>
<input type="hidden" id="search" name="search" value="zzz"></form>
<form id="search"><button class="tagcloud" type="submit" formaction="go.php" method="GET">aa</button>
<input type="hidden" id="search" name="search" value="aa"></form>
<form id="search"><button class="tagcloud" type="submit" formaction="go.php" method="GET">aaa</button>
<input type="hidden" id="search" name="search" value="aaa"></form>
</cloudcontainer>