title: How to remove one side of padding completely? Also, how do I center a banner with another image aligned left in the same table row?
body: <p>Thanks in advance for any help.</p>
  
  <p>What I am trying to achieve:
  Firstly, if you preview that code, you will see that due to the padding of the Header, the page requires dragging a tiny bit to the right. When I remove all of the padding, this is not a problem. With the padding, it is. I have tried making all padding 5px and the right padding 0px, but this did not solve the issue.</p>
  
  <p>Secondly, with the Banner, I am trying to make it center with the table row, rather than with the remaining space in the table row. Right now, because there is already an image aligned to the left of the table row, the image which I want aligned to the center of the page is aligning with ONLY the available space, so it's over to the right a bit too much. </p>
  
  <p>Here is the work I have done sofar, please keep in mind, that this is only day two or working on it, so it is clearly quite messy sofar:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Blank&lt;/title&gt;
  
  &lt;style type="text/css"&gt;
  
  body{ 
  background-repeat:no-repeat;
  background-color:#045FB4;
  margin-top: 0px; margin-left: 0px; margin-right: 0px;
  }
  
  A:link {color: #808080;} 
  A:visited {color: #808080;} 
  A:hover {color: #990000;}
  
  #formwrap {
  font: 14px Arial, Helvetica, sans-serif;
  color: #FFFFFF;
  width: 800px;
  height: 600px;
  border-radius:15px;
  box-shadow: 0px 0px 0px 8px rgba(0,0,0,0.3);  
  margin-right: auto;
  margin-left: auto;
  background-color:#08298A;
  opacity:0.8;
  
  }
  
  #header {
  font:15px Georgia, "Times New Roman", Times, serif;
  color:#FFF;
  width:100%;
  height:30px;
  margin-right: auto;
  margin-left: auto;
  background-color:#999;
  opacity: 0.6;
  text-align:left;
  padding-bottom:5px;
  padding-left:5px;
  padding-top:5px;
  padding-right:0px;
  line-height: 30px;
  
  }
  
  img:logo.png {
  position: absolute;
  left: 0;
  }
  
  &lt;/style&gt;
  
  
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;table align="center" width="100%" height="100%"&gt;
  
  &lt;div id="header" align="center"&gt; Welcome to Blank.
  &lt;/div&gt;
  
  &lt;tr&gt;
  
  &lt;img src="http://placehold.it/100x100" width="100px" height="100px" style="padding:10px" alt="This image cannot be displayed." align="left"/&gt;
  &lt;div align="center" style="width:100%"&gt; &lt;img src="http://placehold.it/728x90" style="padding:14px" alt="This image cannot be displayed." align="center" style="clear:both" style="float:left"/&gt; 
  &lt;/div&gt;
  
  &lt;/tr&gt;
  
  &lt;br /&gt;
  &lt;tr align="center"&gt;
  &lt;td align="center" height="100%"&gt; 
  &lt;img src="http://placehold.it/160x40" padding="0px"/&gt;
  &lt;img src="http://placehold.it/160x40" padding="0px"/&gt;
  &lt;img src="http://placehold.it/160x40" padding="0px"/&gt;
  &lt;img src="http://placehold.it/160x40" padding="0px"/&gt;
  &lt;img src="http://placehold.it/160x40" padding="0px"/&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  
  &lt;tr align="center"&gt;
  
  &lt;td align="center" height="100%"&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;div id="formwrap"&gt; 
  &lt;br&gt; Text test.
  
  &lt;/div&gt;
  &lt;/td&gt;
  
  &lt;/tr&gt;
  &lt;/table&gt;
  
  
  
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>