GoogleChromeのデベロッパーツール

前提・実現したいこと

GoogleChromeのデベロッパーツールの表示が以のように
左上によってしまいます。
直し方を教えていただきたいです。

発生している問題・エラーメッセージ

該当のソースコード

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>App</title>
    <%= csrf_meta_tags %>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application' %>
    <%= javascript_include_tag 'https://kit.fontawesome.com/3b011d839e.js' %>
    <%= javascript_include_tag 'https://code.jquery.com/jquery-1.12.3.min.js' %>
    <%= javascript_include_tag 'https://cdnjs.cloudflare.com/ajax/libs/jquery-sidebar/3.3.2/jquery.sidebar.min.js' %>
  </head>
  <body>
    <%= render 'layouts/notifications' %>
    <%= yield %>
  </body>
</html>

html
1<div class="wrapper select">
2    <div class="select__box">
3      <div class="select__box__left">
4        <%= image_tag '767652_m 2.JPG' %>
5      </div>
6      <div class="select__box__right">
7        <div class="select__box__right__sign-in">
8          <%= link_to "Sign In", new_user_session_path %>
9        </div>
10        <div class="select__box__right__sign-up">
11          <%= link_to "Sign Up", new_user_registration_path, class:'left__box' %>
12        </div>
13      </div>
14    </div>
15  </div>

css
1* {
2  box-sizing: border-box;
3}
4
5
6.wrapper{
7  width: 100vw;
8  height: 100vh;
9}
10
11.select{
12  background: #43C6AC;  /* fallback for old browsers */
13  background: -webkit-linear-gradient(to right, #43C6AC, #F8FFAE);  /* Chrome 10-25, Safari 5.1-6 */
14  background: linear-gradient(to right, #43C6AC, #F8FFAE); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
15  }
16.select__box{
17  background-color: white;
18  margin: 0 auto;
19  width: 1110px;;
20  height: calc(100vh - 100px);
21  margin-top: 50px;
22  display: flex;
23  &__left{
24    width: 50%;
25    height: 100%;
26  }
27  &__left img{
28    // width:auto;
29    // height:auto;
30    width:100%;
31    height:100%;
32    opacity: 0.5;
33  }
34  &__right{
35    width: 50%;
36    height: 100%;
37    position: relative;
38    background-color: #F5F5F5;
39  }
40}
41@media(max-width:600px){
42  .select__box__left img{
43    display: none;
44  }
45}
46
47
48.select__box__right__sign-in{
49  background-color: #B0E0E6;
50  height: 50px;
51  width: 300px;
52  border-radius: 40px;
53  text-align: center;
54  position: absolute;
55  top: 320px;
56  left: 150px;
57}
58.select__box__right__sign-in a,
59.select__box__right__sign-up a{
60  color: white;
61  line-height: 50px;
62  font-weight: bold;
63  font-size: 20px;
64}
65.select__box__right__sign-up{
66  background-color: #43BFA0;
67  height: 50px;
68  width: 300px;
69  border-radius: 40px;
70  text-align: center;
71  position: absolute;
72  top: 390px;
73  left: 150px;
74}
75
76
77.select__box__right__sign-up :hover,
78.select__box__right__sign-in :hover{
79  text-decoration: none;
80  color: white;
81}