Can't change the width of table <TD> - css

Question

The blue table data entry won't reside its width. Is there a new html5 way to be able to achieve this feat? The row should be the same width as the photo above it.
<div class="template" style="text-align:center">
<table width="100%" and height="100%" BORDER=0 CELLSPACING=0 CELLPADDING=0 align="center">
<tr>
<td width='100%' height='100%' bgcolor='#f2f3f4'>
<div style="text-align: center;">
<img src ="https://image.ibb.co/i4ykZk/roverlogo.png" alt="RoverLogo">
</div>
</td>
</tr>
<!-- Background photo -->
<TABLE width="80%" BORDER="0" cellpadding="0" CELLSPACING="0" align="center">
<TR>
<TD WIDTH="997" HEIGHT="326"
background="https://image.ibb.co/dO1HfQ/dog3edit.jpg" style="background-
image:url(https://image.ibb.co/dO1HfQ/dog3edit.jpg); background-repeat:
no-repeat;">
<!-- <b>WELCOME TO ROVER! </b> -->
<FONT class="titletext" color="white" align="center" style="width: 800px;
font-size: 50px;"><b>WELCOME TO ROVER!</b></FONT><br><br>
<FONT class="subtitletext" color="white" align="center" style="width:
100px;
font-size: 30px;">Ready to get started?</FONT><br><br><br>
<a href="#"><img src="https://image.ibb.co/nvbiLQ/button.png"
alt="Button" border="0"></a>
</TD>
</TR>
<tr>
<td width="80%" bgcolor="#blue" style="width:80%">
</td>
</tr>
</TABLE>
</table>
</div>

Answer 1

article {
width: 100%;
}
#banner {
background: url("https://image.ibb.co/dO1HfQ/dog3edit.jpg") no-repeat no-repeat;
padding: 25px 0;
}
h1 {
font-size: 50px;
margin-bottom: 0;
}
h1, p {
color: white;
width: 100%;
text-align: center;
}
p {
font-size: 30px;
}
button {
width: 200px;
background: #00c55c;
border: none;
padding: 12px 24px;
color: white;
font-size: 24px;
border-radius: 6px;
display: block;
margin: 0 auto;
clear: both;
}
#logo {
background: #f2f3f4;
}
#logo img {
display: block;
margin: 0 auto;
clear: both;
}
<article>
<section id="logo">
<img src ="https://image.ibb.co/i4ykZk/roverlogo.png" alt="RoverLogo">
</section>
<section id="banner">
<h1>Welcome to Rover!</h1>
<p>Ready to get started?</p>
<button>Search Sitters</button>
</section>
</article>
I'd do something like this. No table for layout. If it has to be inline, just put a <style></style> tag above the HTML block.

Answer 2

For the background color of the button i used the following website.
https://flatuicolors.com/
I also made everything separated into css and html so you could see. No inline CSS. This is the proper way to use tables, and headers.
Use a <div> tag for the headers as it automatically pushes things to a new line after it. No need for the break tag. The break tag is rarely used in design anymore.
Also i made sure that your separator line is blue.
I believe there are better ways of accomplishing this WITHOUT tables, however you said you needed this in table form, so here ya go!
table {
width: 80%;
border: none;
text-align: center;
margin: 0 auto;
color: white;
}
.background {
background: url('https://image.ibb.co/dO1HfQ/dog3edit.jpg');
}
.titletext {
font-size: 50px;
}
.subtitletext {
font-size: 30px;
}
button {
margin: 10px 0;
width: 50%;
border-radius: 15px;
height: 100px;
background: #27ae60;
border: 1px solid rgba(255,255,255,0.8);
font-size: 20px;
color: white;
}
button:hover {
background-color: #2ecc71;
}
.seperator {
width: 80%;
background: blue;
}
<TABLE>
<TR class="background">
<TD>
<div class="titletext">WELCOME TO ROVER!</div>
<div class="subtitletext">Ready to get started?</div>
<button>Search Sitters</button>
</TD>
</TR>
<tr>
<td class="seperator""></td>
</tr>
</TABLE>

Answer 3

You are using inline css,Try this:
<TABLE style="width="80%" BORDER="0" cellpadding="0" CELLSPACING="0" align="center"";>