Positioning the div when adding information | Getting it off the screen

@import url('https://fonts.googleapis.com/css?family=Roboto'); * { padding: 0; margin: 0; } body { background: #fff; } h1, h2, h3, h4, h5, h6, h3, p, a { font-family: 'Roboto', sans-serif; text-decoration: none; } .downloads { margin: 0 auto; padding: 25px; max-width: 45.2vw; height: 100%; } .downloads:after { display: table; content: ''; clear: both; } .downloads>h2 { position: relative; top: -2%; left: 50%; transform: translate(-50%, 2%); width: 10vw; line-height: 50px; text-align: center; border-radius: 30px; background: linear-gradient(to right, rgb(247, 52, 124) 0%, rgb(255, 89, 74) 100%); color: #fff; box-shadow: 1px 10px 20px -8px #2d2d2d; margin-top: 25px; margin-bottom: 10px; } /*----------------------------------------- Button -----------------------------------------*/ .install>a { display: block; position: relative; text-decoration: none; text-align: center; font-size: 18px; font-weight: bold; color: black; background: linear-gradient(to right, rgb(247, 52, 124) 0%, rgb(255, 89, 74) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; border-radius: 30px; padding: 5px; width: 70%; transition: .25s; margin: auto; margin-top: 30px; } .install>a:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: white; border-radius: 30px; z-index: -1; transition: .25s; } .install>a:before { content: ""; position: absolute; top: -4px; left: -4px; width: calc(100% + 8px); height: calc(100% + 8px); background: linear-gradient(to right, rgb(247, 52, 124) 0%, rgb(255, 89, 74) 100%); border-radius: 30px; z-index: -1; transition: .25s; } .install>a:hover:after { opacity: 0; transition: .25s; } .install>a:hover { background: #fff; -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: .25s; } /*----------------------------------------- Button -----------------------------------------*/ /*------------------------------------------ Item ------------------------------------------*/ .item { position: relative; float: left; width: 20vw; text-align: center; padding-top: 20px; padding-bottom: 20px; margin: 25px; transition: .15s; } .item:hover:before { box-shadow: 1px 10px 20px -8px #2d2d2d; transition: .25s; } .item:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: white; border-radius: 30px; z-index: -2; transition: .25s; } .item:before { content: ""; position: absolute; top: -4px; left: -4px; width: calc(100% + 8px); height: calc(100% + 8px); background: linear-gradient(to right, rgb(247, 52, 124) 0%, rgb(255, 89, 74) 100%); border-radius: 30px; z-index: -2; transition: .25s; } .item:nth-child(2n):before { background: linear-gradient(to right, rgb(255, 89, 74) 0%, rgb(247, 52, 124) 100%); } .item:nth-child(2n)>.txt { background: linear-gradient(to right, rgb(255, 89, 74) 0%, rgb(247, 52, 124) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /*------------------------------------------ Item ------------------------------------------*/ /*------------------------------------------ Img ------------------------------------------*/ .img>img { max-width: 50%; border-radius: 30px; } /*------------------------------------------ Img ------------------------------------------*/ /*------------------------------------------ TxT ------------------------------------------*/ .txt { font-size: 20px; color: black; background: linear-gradient(to right, rgb(247, 52, 124) 0%, rgb(255, 89, 74) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /*------------------------------------------ TxT ------------------------------------------*/ /*----------------------------------------- Wrap -----------------------------------------*/ .warp { width: 50vw; } /*----------------------------------------- Wrap -----------------------------------------*/ /*---------------------------------------- Footer ----------------------------------------*/ footer { text-align: center; background: linear-gradient(to right, rgb(247, 52, 124) 0%, rgb(255, 89, 74) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin: 15px; } footer>p>a { background: linear-gradient(to right, rgb(247, 52, 124) 0%, rgb(255, 89, 74) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-decoration: underline; } /*---------------------------------------- Footer ----------------------------------------*/ 

 <main> <div class="downloads"> <h2>Загрузки</h2> <div class="warp"> <div class="item"> <div class="img"> <img src="../img/script.svg"> </div> <div class="txt"> <h3>Скрипт Загрузок</h3> <p>Это скрипт который вы видети перед собой</p> <h6>Индификатор загрузки: 0</h6> </div> <div class="install"> <a href="files/sc-downloads.rar" download="">Устоновить</a> </div> </div> <div class="item"> <div class="img"> <img src="../img/script.svg"> </div> <div class="txt"> <h3>Скрипт Загрузок</h3> <p>Это скрипт который вы видети перед собой</p> <h6>Индификатор загрузки: 1</h6> </div> <div class="install"> <a href="files/sc-downloads.rar" download="">Устоновить</a> </div> </div> <div class="item"> <div class="img"> <img src="../img/script.svg"> </div> <div class="txt"> <h3>Скрипт Загрузок</h3> <p>Это скрипт который вы видети перед собой</p> <h6>Индификатор загрузки: 2</h6> </div> <div class="install"> <a href="files/sc-downloads.rar" download="">Устоновить</a> </div> </div> <div class="item"> <div class="img"> <img src="../img/script.svg"> </div> <div class="txt"> <h3>Скрипт Загрузок</h3> <p>Это скрипт который вы видети перед собой</p> <h6>Индификатор загрузки: 3</h6> </div> <div class="install"> <a href="files/sc-downloads.rar" download="">Устоновить</a> </div> </div> </div> </div> </main> <footer> <p>Внимание! Все права защищены! © <a href="http://vk.me/dskoper">MrSkoper</a>, 2018</p> </footer>