title: Why does the textbox and button looks out of layout on different screens?
body: <p>WHy does my page especially the Textbox and button part look out of place on a screen different than laptops or pc?</p>
  
  <p>It goes out of order on tablets or 40inches screen. How to maintain it across all types?</p>
  
  <p>I have used bootstrap etc and some custom css but still the textbox and button part goes out of the way.</p>
  
  <pre><code>&lt;div id="appointments" class="appointment-main-block appointment-two-main-block"&gt;
      &lt;div class="container"&gt;
          &lt;div class="row topheaderMargin"&gt;
              &lt;div class="section text-center"&gt;
                  &lt;h3 class="section-heading text-center"&gt;Select Services&lt;/h3&gt;
              &lt;/div&gt;
  
              &lt;div class="col-md-8 col-sm-12" style="width: 100% !important"&gt;
                  &lt;div class="appointment-block"&gt;
  
                      &lt;h5 class="form-heading-title"&gt;&lt;span class="form-heading-no"&gt;1.&lt;/span&gt;Services&lt;/h5&gt;
                      &lt;div class="row"&gt;
  
                          @using (Html.BeginForm())
                          {
                              &lt;div class="col-sm-6"&gt;
                                  @*&lt;input type="text" class="form-control date-pick searchBox" id="appointment-date" placeholder="Appointment Date"&gt;*@
                                  @Html.EditorFor(Model =&gt; Model.Booking_ID, new { htmlAttributes = new { @class = "form-control searchBox", placeholder = "Booking ID" } })
                                  @Html.ValidationMessageFor(Model =&gt; Model.Booking_ID, "", new { @class = "ErrorMessages searchBox" })
                              &lt;/div&gt;
                              &lt;button type="button" onclick="selectService()" class="btn btn-primary pull-right searchButton"&gt;Save&lt;/button&gt;
                          }
  
                      &lt;/div&gt;
                      &lt;div class="table-responsive"&gt;
                          &lt;table id="tblServices" class="table table-condensed table-responsive tableBody"&gt;
  
                              &lt;thead&gt;
                                  &lt;tr&gt;
  
                                      &lt;th&gt;S.No&lt;/th&gt;
                                      &lt;th&gt;Service Name&lt;/th&gt;
                                      &lt;th&gt;Service Price&lt;/th&gt;
  
                                  &lt;/tr&gt;
                              &lt;/thead&gt;
                              &lt;tbody id="tbodytblServices"&gt;&lt;/tbody&gt;
  
                          &lt;/table&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>update:</p>
  
  <p>Custom CSS:</p>
  
  <pre><code>.ErrorMessages {
      font-size: small;
      color: tomato;
  }
  
  .fa-Icons-Padding {
      padding-top: 33px;
  }
  
  .MessageStrip {
      background-color: #0891ff !important;
      color: white !important;
      text-align: center !important;
      font-family: arial !important;
      font-weight: bold !important;
  }
  
  .Container-IndexPage {
      padding-right: 0%;
      padding-left: 0%;
  }
  
  .topBar {
      background-color: #F4F4F4 !important;
  }
  
  .searchBox {
      margin-left: 73%;
      width: 60% !important;
      border-color: lightgrey !important;
  }
  
  .searchButton {
      margin-right: 29%;
  }
  
  .searchButton {
      margin-right: 28.7%
  }
  
  .AddServicesSearchButton 
  {
      margin-right: 7.7%;
      margin-top: -8%;
  }
  
  .datatable-headerrow {
      background-color: #F4F4F4 !important;
  }
  
  .pagination-buttons {
      background: linear-gradient(to bottom, #0891FF 0%, #0891FF 100%) !important;
      color: white !important;
  }
  
  .searchbox-border {
      border-color: lightgrey !important;
  }
  
  .tableBody {
      font-size: 16px !important;
      font-family: calibri !important;
  
  }
  
  .btnCheckIn {
      margin-right: 61%;
      margin-top: 1%;
  }
  
  .btnEdit {
      color: #fff !important;
      background-color: #0891FF !important;
      /*margin-right: -670%;
  margin-top: -25%;*/
  }
  
  .btnBill 
  {
  
      margin-right: 4%;
      margin-top: -18%;
      background-color: #03C04A;
  }
  
  .btnCancel {
      color: #fff !important;
      background-color: tomato !important;
      margin-right: 27%;
      margin-top: -18%;
  }
  
  .searchButtonConfirmationCancellation {
      margin-right: 28.7%;
  }
  
  .addCustomerBtn {
      margin-left: 376%;
      margin-top: 5%;
      margin-bottom: 5%;
  }
  
  .printDiv {
      text-align: center;
      margin-bottom: 1.5%;
  }
  
  .pad-container {
      padding-top: 0% !important;
  }
  
  .table-header {
      font-size: 81%;
      font-family: arial;
  }
  
  .specialh3 
  {
      text-align: center;
      text-transform: capitalize;
  }
  
  .selectColumn 
  {
      margin: 11px -13px 14px !important;
  }
  
  .InvoiceTable 
  {
      width: 50%;
      margin-left: 25%;
      margin-top: 1%;
      border: 1px gray dashed;
  }
  .Copies 
  {
      margin-left: 46%;
      margin-top: 1% !important;
      font-size: 11px !important;
  
  }
  
  .topheaderMargin 
  {
      margin-top: -5%;
  }
  </code></pre>