give space between particular elements in a table

i have two html table's inside a main table. I have to give the space between td of first table so that Heading one should be on top of Element1 and text box and Heading two should be on top of Element2 and select lists which are available in other table. Please suggest how can i achieve this, do i need to modify the html table structure. Please find the fiddle:http://ift.tt/1JroBTx

Below is the css code:

td:nth-child(1) {
    padding-right: 90px;
}

HTML code:

<table>

 <table>
    <tr>
    <td class="hone" class="more-padding-on-right">
            Heading One
    </td>
    <td class="htwo">
           Heading Two
    </td>
    </tr>
 </table>
<table>
<tr valign="top">
<td>  Element1:<input id="myTest" type="text" value="">  </td>  
<td>
Element2:<SELECT id="one" size="10" multiple>
    <OPTION value="a">AAA</OPTION>
    <OPTION value="b">BB</OPTION>
    <OPTION value="c">CCC</OPTION>
</SELECT>
</td>
<td valign="center">
<a href="#">&gt;&gt;</a>
</td>
<td>
<SELECT id="two" size="10" multiple>
    <OPTION value="a">FF</OPTION>
    <OPTION value="b">GG</OPTION>
    <OPTION value="c">BHH</OPTION>

</SELECT>
</td>
</tr>
</table>    
</table>

align scrollable table columns with header in css

JsFiddle URL : http://ift.tt/1KLVyuM

<table cellspacing="0" cellpadding="0" border="0" width="325" >
  <tr>
    <td>
       <table cellspacing="0" cellpadding="1" border="1" width="300" >
         <tr>
            <th>Full Name</th>
            <th>Status</th>
            <th>Last reported</th>
         </tr>
       </table>
    </td>
  </tr>
  <tr>
    <td>
       <div class ='cont' style="width:325px; height:48px; overflow:auto;">
         <table class='data' cellspacing="0" cellpadding="1" border="1" width="300"  >
           <tr>
             <td>col 1 data 1</td>
             <td>col 2 data 1</td>
             <td>col 3 data 1</td>
           </tr>
           <tr>
             <td>col 1 data 2</td>
             <td>col 2 data 2</td>
             <td>col 3 data 2</td>
           </tr>
           <tr>
             <td>col 1 data 3</td>
             <td>col 2 data 3</td>
             <td>col 3 data 3</td>
           </tr>
         </table>  
       </div>
    </td>
  </tr>
</table>

The columns are not aligned with the headers.

I want the table used for data to be aligned with the headers.

td width=100px for second table is not working.

CSS Background Image Not Adapting With Screen Size

I am a relatively new at HTML / CSS. I have started to develop a website but my main "hero" image doesn't adapt properly with smaller pages and leaves white space. If you could help me diagnose the problem it would be greatly appreciated.

*/ css */

#intro {
    z-index: 100;
    width: 100%;
    height: 66%;
    background: url("../images/intro2.jpg"); center center no-repeat;
    background-size: cover;
    background-repeat: no-repeat;
    top:10%;
    background-position: 0px -150px;
    left: 0;
    position: absolute;
    background-size: 100%;
}
#intro .wrap{
    margin: 0 auto;
    position: relative;
}
#intro .content{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}

*/ html */

<section id="intro">
    <div class="wrap">
        <div class="content">
        <h1 id="welcome"> Your number one choice for music <br> in the south coast </h1>
        </div>
    </div>
</section>

The site can also be viewed Here

Best Practice - Shift + Enter in Input

Implementing a UI form and I'm curious what the best practice is for handling SHIFT + ENTER with a HTML input focused.

In a textarea this seems clear: add a new line / don't submit the form.

In an input, I'm not quite certain: should this just do nothing? Submit the form (as with ENTER)?

Rails pre tags are inserting tabs for unknown reason

In one of my views I have the following code with this exact indentation...

<h2>TEST</h2>
<p>This is my code...</p>
<br/><br/>
<pre>
Testing
1
  2
    3
</pre>

However it is rendering like this:

Note that everything in the pre tag is indented beyond where the rest of the code is. I cannot figure out why.

Setting up XML coding for website

I don't have any experience when it comes to coding any type of language, but I do want to try and understand the logic flow. For my website, I am using magento as the backend system and trying to create a blogging page on my site. I have third party developer working for me, but they gave me an estimate that doesn't seem right. In the backend, I can create he CMS page for blog, but I want to design the template or even buy a template off a free lancer. Only thing is that there seems to be two method to design the blog and that is either manually typing in the Xml coding for the page layout or select the xml file from within my server. I don't have admin access to my server because I left that for my developers to work on, but I do have the ftp access. I'm honestly not sure if the ftp is my actual server access or not. To make things short I have two question. First is that is it possible to simply copy and paste the xml coding into the page layout? The other question is if I were to download the xml document, would I simply upload it via ftp access and choose that template on magento backend?

JQuery validation message appearing weirdly between two radio buttons

I am using JQuery Validation plugin to validate my form. The validation messages for all the fields except radio button are showing properly below the respective field.But for radio button the messages are showing between first two radio buttons.

gender : {
    required : true
    }


<html:radio property="gender" value="1"
        name="formBean" styleId="gender">&nbsp;Male&nbsp;</html:radio>
    <html:radio property="gender" value="0"
        name="formBean" styleId="gender">&nbsp;Female&nbsp;</html:radio>

Is there any way the error message shown after or below the radio buttons?

Thanks in advance.