كيف يمكنني معالجة scroll الذي في أسفل الصفحة ؟

السلام عليكم ,

1-لا ادري لماذا يوجد scroll في صفحه ال indexوايضا ال contact ؟؟ حاولت معرفه السبب ولكني لم استطع

2- في صفحه ال index اريد ان اجعل قسم ال hero في المنتصف القسم المحدد في الصوره 

index.html 

<!-- Start Header -->
<header>
  <div>
    <a class="logo">
      <!-- <img src="./images/scooter.png" width= "150" height="100" alt=""> -->
      <span class="firstL">S</span>COOTER
    </a>
  </div>

  <div>
    <a class="active" href="home.html">Home</a>
    <a href="about.html">About</a>
    <a href="contact.html">Contact</a>
  </div>
</header>
<!-- End Header -->

<section class="hero">
  <div class="left-part">
    <!-- <div class=""><hr /></div> -->
    <h1>Buy the best Scooter ever</h1>
    <p>A scooter or motor scooter is a motorcycle with an underbone or step-through frame and a platform for the rider's feet, emphasizing comfort and fuel economy.</p>
    <div class="line">
      <hr />
    </div>
  </div>
  <div class="right-part">
    <div class="shape"></div>
    <img src="./images/IMG_9593.PNG" height="300px" width="300px" alt="" />
  </div>
</section>

contact.html 

<div class="contactBody">
        <section class="info">
                <h1>
                    Contact Us
                </h1>
                <div class="con-img">
                    <img src="./images/IMG_9591.PNG"  height="300px" width="300px" alt="">
                </div>
            <form>
                <div class="name">
                    <!-- <label">Name</label> -->
                    <input placeholder="Name" type="text">
                </div>
                <div class="email">
                    <!-- <label">Name</label> -->
                    <input placeholder="Email" type="email">
                </div>
                <div class="number">
                    <!-- <label">Name</label> -->
                    <input placeholder="Your phone number" type="text">
                </div>
                <div>
                    <input type="button" value="SUBMIT">
                </div>
            </form>
            <!-- <div class="con-img">
                <img src="./images/IMG_9591.PNG"  height="300px" width="300px" alt="">
            </div> -->
        </section>
    </div>

style.css

header {
  display: flex;
  width: 100vw;
  height: 3rem;
  justify-content: space-between;
  align-items: center;
  padding-left: 5rem;
  padding-right: 5rem;
}

.hero {
  margin-top: 5rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100vw;
}

/* Contact page */


.info {
  width: 100%;
  margin-left: 5rem;
  margin-top: 3rem;
}

وشكرا