When I write in the input the text starts to appear in the middle instead of the beginning

Question

I’m quite beginner still in html/css and found no answer anywhere, but then, in the input I put a css to increase the size of "box" etc, but when I write appears the "|" to start writing in a strange position, I wanted q to start at the beginning.

CSS/HTML:

aside {
    background: #ffffff;
    color: white;
    border: 2px #438df2 solid;
    float: left;
    height: 75.56%
}

aside p {
    font-size: 17px;
    font-family: 'Montserrat', sans-serif;
    color: black;
    margin: 15px;
}

.label1, .label2 {
    color: black;
    font-size: 17px;
    font-family: 'Montserrat', sans-serif;
    margin: 15px;
}

#email {
    padding: 0px 35px 10px 50px;
    margin: 0px;
}

#email2 {
    padding: 0px 60px 120px 60px;
    margin: 0px;
}

  <aside>
     <p>Interested in my work? Send me a message!</p>
     
      <label for="email" class="label1">Insert your email here:</label>
      <p>
        <input type="text" id="email" name="Email" class="input1"></p>
        
        <label for="text" class="label2">Insert your message here:</label>
      <p>
        <input type="text" id="email2" name="Text" class="input1"></p>
        
        <button>Send</button>
        
  </aside>
  

Answer 1

It’s because of the paddings:

#email {
    padding: 0px 35px 10px 50px;
    margin: 0px;
}

#email2 {
    padding: 0px 60px 120px 60px;
    margin: 0px;
}

You can exchange for width and height:

aside {
    background: #ffffff;
    color: white;
    border: 2px #438df2 solid;
    float: left;
    height: 75.56%
}

aside p {
    font-size: 17px;
    font-family: 'Montserrat', sans-serif;
    color: black;
    margin: 15px;
}

.label1, .label2 {
    color: black;
    font-size: 17px;
    font-family: 'Montserrat', sans-serif;
    margin: 15px;
}

#email {
    width: 260px;
    height: 30px;
    margin: 0px;
}

#email2 {
    width: 295px;
    height: 140px;
    margin: 0px;
}

  <aside>
     <p>Interested in my work? Send me a message!</p>
     
      <label for="email" class="label1">Insert your email here:</label>
      <p>
        <input type="text" id="email" name="Email" class="input1"></p>
        
        <label for="text" class="label2">Insert your message here:</label>
      <p>
        <input type="text" id="email2" name="Text" class="input1"></p>
        
        <button>Send</button>
        
  </aside>
  

The second input was quite large, I think what you want is a textarea maybe, see like this:

aside {
    background: #ffffff;
    color: white;
    border: 2px #438df2 solid;
    float: left;
    height: 75.56%
}

aside p {
    font-size: 17px;
    font-family: 'Montserrat', sans-serif;
    color: black;
    margin: 15px;
}

.label1, .label2 {
    color: black;
    font-size: 17px;
    font-family: 'Montserrat', sans-serif;
    margin: 15px;
}

#email {
    width: 260px;
    height: 30px;
    margin: 0px;
}

#email2 {
    width: 295px;
    height: 140px;
    margin: 0px;
}

  <aside>
     <p>Interested in my work? Send me a message!</p>
     
      <label for="email" class="label1">Insert your email here:</label>
      <p>
        <input type="text" id="email" name="Email" class="input1"></p>
        
        <label for="text" class="label2">Insert your message here:</label>
      <p>
        <textarea id="email2" name="Text" class="input1"></textarea></p>
        
        <button>Send</button>
        
  </aside>