CSS или JS переопределяют

Я пишу код для регистрационной формы, так как я импортирую код из другого файла для столбца с номером телефона, но когда я помещаю этот код, вы можете увидеть @include ('layouts.phone'); его отображение как

и когда я помещаю @include ('layouts.phone'); между @extends и @section он отображается как

я не знаю, почему это работает, любое предложение будет для меня большим

@extends('layouts.app')
@section('content')

<div class = "container">
 <link href = "{{ asset('public/css/form.css') }}" rel = "stylesheet">


<!-- One "tab" for each step in the form: -->

<div id = "registerusers">
<center >
<div class = "row" style = "margin-left: 250px;margin-top: 50px">

    <div class = "col-md-2 box" onclick = "selectImage('indivisual')">
      <label class = "btn btn-primary"><img src = "{{asset('public/images/user.png')}}" alt = "..." class = "img-thumbnail img-check">
        <input type = "radio" name = "chk1" id = "item4" value = "val1" hidden = "" class = "hidden" autocomplete = "off">
      </label>
      indivisual
    </div>

    <div class = "col-md-2 box" onclick = "selectImage('agent')">
      <label class = "btn btn-primary">
        <img src = "{{asset('public/images/user.png')}}" alt = "..." class = "img-thumbnail img-check">
        <input type = "radio" name = "chk1" id = "item4" value = "val2" class = "hidden" hidden = "" autocomplete = "off">
      </label>
    </div>

    <div class = "col-md-2 box" onclick = "selectImage('vendor')">
      <label class = "btn btn-primary">
        <img src = "{{asset('public/images/user.png')}}" alt = "..."  class = "img-thumbnail img-check">
        <input type = "radio" name = "chk1" id = "item4" value = "val3" hidden = "" class = "hidden" autocomplete = "off">
      </label>
    </div>


    <div class = "col-md-2 box" onclick = "selectImage('service')">
      <label class = "btn btn-primary">
        <img src = "{{asset('public/images/user.png')}}" alt = "..." class = "img-thumbnail img-check">
        <input type = "radio" name = "chk1" id = "item4" value = "val4" hidden = "" class = "hidden" autocomplete = "off">
      </label>
      </div>

</div>

    <br>
    <input id = "register" style = "width: 200px" type = "button" onclick = "check()" value = "Register" class = "btn btn-success">

  </center>

  </div> 

<div id = "indivisual" class = "hid">
   <form id = "regForm" action = "">


<!-- One "tab" for each step in the form: -->
<div class = "tab">Basic Info




                    <div class = "form-group row">
                            <label for = "user_firstname" class = "col-md-4 col-form-label text-md-right">{{ __('First Name') }}</label>

                            <div class = "col-md-6">
                                <input id = "user_firstname" type = "text" class = "form-control{{ $errors->has('name') ? ' is-invalid' : '' }}" name = "user_firstname" value = "{{ old('user_firstname') }}" required autofocus>


                            </div>
                        </div>

                        <div class = "form-group row">
                            <label for = "user_lastname" class = "col-md-4 col-form-label text-md-right">{{ __('Last Name') }}</label>

                            <div class = "col-md-6">
                                <input id = "user_lastname" type = "text" class = "form-control{{ $errors->has('user_lastname') ? ' is-invalid' : '' }}" name = "user_lastname" value = "{{ old('user_lastname') }}" required autofocus>

                            </div>
                        </div>


                        <div class = "form-group row">
                            <label for = "user_phone" class = "col-md-4 col-form-label text-md-right">{{ __('Phone Number') }}</label>

                            <div class = "col-md-6">

                              @include('layouts.phone')
                            </div>
                        </div>

                       <div class = "form-group row">
                            <label for = "user_email" class = "col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>

                            <div class = "col-md-6">
                                <input id = "email" type = "email" class = "form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" name = "email" value = "{{ old('email') }}" required>


                            </div>
                        </div>


                         <div class = "form-group row">
                            <label for = "username" class = "col-md-4 col-form-label text-md-right">{{ __('Username') }}</label>

                            <div class = "col-md-6">
                                <input id = "username" type = "text" class = "form-control{{ $errors->has('username') ? ' is-invalid' : '' }}" name = "username" value = "{{ old('username') }}" required autofocus>

                            </div>
                        </div>


                        <div class = "form-group row">
                            <label for = "password" class = "col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>

                            <div class = "col-md-6">
                                <input id = "password" type = "password" class = "form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" name = "password" required>


                            </div>
                        </div>

                         <div class = "form-group row">
                            <label for = "password-confirm" class = "col-md-4 col-form-label text-md-right">Confirm Password</label>

                            <div class = "col-md-6">
                                <input id = "password-confirm" type = "password" class = "form-control" name = "password_confirmation" required>
                            </div>
                        </div>






</div>

<div class = "tab">Contact Info:
  <p><input placeholder = "E-mail..." oninput = "this.className = ''"></p>
  <p><input placeholder = "Phone..." oninput = "this.className = ''"></p>
</div>

<div class = "tab">Birthday:
  <p><input placeholder = "dd" oninput = "this.className = ''"></p>
  <p><input placeholder = "mm" oninput = "this.className = ''"></p>
  <p><input placeholder = "yyyy" oninput = "this.className = ''"></p>
</div>

<div class = "tab">Login Info:
  <p><input placeholder = "Username..." oninput = "this.className = ''"></p>
  <p><input placeholder = "Password..." oninput = "this.className = ''"></p>
</div>

<div style = "overflow:auto;">
  <div style = "float:right;">
    <button type = "button" id = "prevBtn" onclick = "nextPrev(-1)">Previous</button>
    <button type = "button" id = "nextBtn" onclick = "nextPrev(1)">Next</button>
  </div>
</div>

<!-- Circles which indicates the steps of the form: -->
<div style = "text-align:center;margin-top:40px;">
  <span class = "step"></span>
  <span class = "step"></span>
  <span class = "step"></span>
  <span class = "step"></span>
</div>

</form> 
</div>  <!-- indivisual form -->






<div id = "agent" class = "hid">
 <h2> agentForm </h2>
</div> <!-- agent form -->


<div id = "vendor" class = "hid">
 <h2> vendorForm </h2>

</div>
 <!-- vendor form -->

<div id = "service" class = "hid"> 
<h2> serviceForm </h2>
</div> <!-- service form -->

</div> <!-- Container -->
<br>



 <script src = "{{ asset('public/js/form.js') }}"></script>

@endsection