This is the content within the <body> tag.
<div id="border">
<p><h1 style="text-align: center;">Welcome to XYZ Airline!</h1></p>
<table caption="Select your preferred seat"
style="margin-bottom: 1.5em; margin-left: auto; margin-right: auto;">
<tr>
<td><p id="dd">Window Seat<input type="radio" name="side"/></p></td>
<td><p id="dd">Front of plane<input type="radio" name="frontorback"/></p></td>
</tr>
<tr>
<td><p id="dd">Aisle Seat<input type="radio" name="side"/></p></td>
<td><p id="dd">Middle of plane<input type="radio" name="frontorback"/></p></td>
</tr>
<tr>
<td><p id="dd">Center Seat<input type="radio" name="side"/></p></td>
<td><p id="dd">Back of plane<input type="radio" name="frontorback"/></p></td>
</tr>
</table>
<p><input type="submit" value="continue" style="float: right;"></p>
</div>
Here are some defined styles:
#border{
border: 2px solid black;
border-radius: 25px;
width: 50%;
margin: auto;
background-color: #ffc;
}
#dd{
margin: 0.2em 0.2em 0.2em 0.2em;
}
When tested on Chrome in macOS, the output looks like this.
https://i.sstatic.net/urV3q.png
The button is aligned to the right as intended but extends beyond the div block. When style="float: right;" is removed, it aligns within the border instead of being on the right side.
https://i.sstatic.net/CfndU.png
To keep the button inside the border, what steps should be taken?