'Going to mobile view, the bar has coded to be 100vw, but it's extending site in width, which I don't want

My problem (in HTML/CSS) is that, when I go to mobile view, it's extending a site width, for pre-counted size. Before all, the bar is calculating a width. for buttons for I add. But, also was I say, then when go to mobile it's extending site for that size.

Really, what I just need, it's when go to mobile, to not oversize a width of site with is below picture marked with red. And just I need, to remove that red marked field when go to mobile.

A error (what I missing) is reproduced by changing the width of navigation bar to 100vw.

Code (CSS and HTML):

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    background-image: url("../datoteke/logo.png");
}

.kontrole ul{
    position:absolute;
    top: 11%;
    left: 50%;
    transform: translate(-50%,-50%);
    margin: 0;
    padding: 20px 0;
    z-index: 1;
    background: #fff;
    display: flex;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,.3);
}
.kontrole ul li{
    list-style: none;
    text-align: center;
    display: block;
    border-right: 1px solid rgba(0,0,0,0.2);
}
.kontrole ul li:last-child{
    border-right: none;
}
.kontrole ul li a{
    text-decoration: none;
    padding: 0 50px;
    display: block;
}
.kontrole ul li a .icon{
    width: 40px;
    height: 40px;
    text-align: center;
    
    overflow: hidden;
    margin: 0 auto 10px;
    
}
.kontrole ul li a .icon .fa{
    width: 100%;
    height: 100%;
     line-height: 40px;
    font-size: 34px;
    transition: 0.5s;
    color: #000;
}

.kontrole ul li a .icon .fa:last-child{
    color: purple;
}
.kontrole ul li a:hover .icon .fa{
    transform: translateY(-100%);
}
.kontrole ul li a .name{
    position: relative;
    height: 20px; 
    width: 100%;
    display: block;
    overflow: hidden;
}
.kontrole ul li a .name span{
    display: block;
    position: relative;
    color: #000;
    font-size: 12px;
    line-height: 20px;
    transition: 0.5s;
    
}
.kontrole ul li a .name span:before{
    content: attr(data-text);
    position: absolute;
    top: -100%;
    width: 100%;
    left: 0;
    height: 1005;
    color: lightsalmon;
    
}
.kontrole ul li a:hover .name span{
    transform: translateY(20px);
}

.podeli{
    width: 1%;
    min-height: 1vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
}

.podeli .overlay{
    z-index: 3;
    top: 0;
    left: 0;
    bottom: 0;
    right:0;
    background: rgba(0,0,0,0.4);
}

.podeli .buttons{
    position: absolute;
    z-index: 5;
    left: 0;
    top: calc(50vh - 135px);
    display: flex;
    flex-direction: column;
}

.podeli .buttons a{
    text-decoration: none;
    color: #fff;
    position: absolute;
    left: 0;
    padding: 8px;
    height: 45px;
    width: 32px;
    border-radius: 5px 0 0 5px;
    text-align: center;
    font-size: 19px;
    transition: 0.3s;
}

.podeli .buttons span{
    display: none;
    transition: 0.3s;
}

.podeli .buttons a:first-child{
    top: 0;
    background: rgba(47,47,238,0.863);
}
.podeli .buttons a:nth-child(2){
    top: 70px;
    background: rgba(52,146,255,0.863);
}
.podeli .buttons a:nth-child(3){
    top: 140px;
    background: rgba(255,253,140,0.863);
    color: #000;
}
.podeli .buttons a:nth-child(4){
    top: 210px;
    background: rgba(112,255,55,0.863);
    color: #000;
}
.podeli .buttons a:last-child{
    top: 280px;
    background: rgba(253,62,62,0.863);
}
.podeli .buttons a:hover{
    width: 200px;
    border-radius: 5px;
}
.podeli .buttons a:hover span{
    display:inline;
    margin-right: 10px;
}

a:hover, a:visited, a:link, a:active{
    text-decoration: none;
}

/* TEST KOD - OJ JOJ MILE OKANISE ŠLJIVE */

#vesti1 {
  border-radius: 25px;
  background: url(../datoteke/image-1.png);
  background-position: left top;
  padding: 20px; 
  /* širina Visina */
  width:1000px;
  height: 333px; 
  text-shadow: 2px 2px 5px red;
  margin-left: auto;
  margin-right: auto;
  float: left;
}
#vesti2 {
  border-radius: 25px;
  background: url(../datoteke/stay-5.png);
  background-position: left top;
  padding: 20px; 
  /* širina Visina */
  width: 333px;
  height: 333px; 
  text-shadow: 2px 2px 5px red;
  margin-left: auto;
  margin-right: auto;
  float: right;
}

#vesti3 {
  border-radius: 25px;
  background: url(../datoteke/stay-5.png);
  background-position: left top;
  padding: 20px; 
  /* širina Visina */
  width: 333px;
  height: 333px; 
  text-shadow: 2px 2px 5px red;
  margin-left: auto;
  margin-right: auto;
  float: left;
}
#vesti4 {
border-radius: 25px;
  background: url(../datoteke/image-2.png);
  background-position: left top;
  padding: 20px; 
  /* širina Visina */
  width:1000px;
  height: 333px; 
  text-shadow: 2px 2px 5px red;
  margin-left: auto;
  margin-right: auto;
  float: right;
}

#pod-naslov{
  text-shadow: 2px 2px 5px blue; 
  position: absolute;
}

#pod-naslov2{
  text-shadow: 2px 2px 19px darkred; 
}

@media screen and (min-width : 0px) and (max-width : 767px){
#vesti1{
    width: 100vw;
    height: 333px;
}
#vesti2{
    width: 100vw;
    height: 333px;
}
#vesti3{
    width: 100vw;
    height: 333px;
}
#vesti4{
    width: 100vw;
    height: 333px;
}
.kontrole ul{
    width: 100vw;
    margin:0 auto;
}
}

<!--Created by UKI COMPUTERS, more information on ukicomputers.github.io-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"/>
        <title>Časopis "Odskočna daska"</title>
        <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" type="text/css" href="./kod/pocetna.css">
    </head>

    <body class="kontrole">
        <ul>
            <li>
                <a href="#">
                    <div class="icon">
                        <i class="fa fa-home" aria-hidden="true"></i>   
                        <i class="fa fa-home" aria-hidden="true"></i>   
                    </div>
                    <div class="name"><span data-text="Početna stranica">Početna stranica</span></div>
                </a>
            </li>
            <li>
                <a href="./casopisi/casopisi.html">
                    <div class="icon">
                        <i class="fa fa-file" aria-hidden="true"></i>
                        <i class="fa fa-file" aria-hidden="true"></i>
                    </div>
                    <div class="name"><span data-text="Časopisi">Časopisi</span></div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="icon">
                        <i class="fa fa-newspaper-o" aria-hidden="true"></i>
                        <i class="fa fa-newspaper-o" aria-hidden="true"></i>
                    </div>
                    <div class="name"><span data-text="Vesti">Vesti</span></div>
                </a>
            </li>
        </ul>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <div class="podeli">
            <div class ="buttons">
                    <a href="javascript:;">
                        <span>Facebook</span>
                        <i class="fa fa-facebook-f"></i>
                    </a>
                    <a href="javascript:;">
                        <span>Twitter</span>
                        <i class="fa fa-twitter"></i>
                    </a>
                    <a href="javascript:;">
                        <span>Instagram</span>
                        <i class="fa fa-instagram"></i>
                    </a>
                    <a href="javascript:;">
                        <span>Whatsapp</span>
                        <i class="fa fa-whatsapp"></i>
                    </a>
                    <a href="javascript:;">
                        <span>Google+</span>
                        <i class="fa fa-google-plus"></i>
                    </a>
            </div>
            <div class="overlay"></div>
        </div>     
        <h1 style="font-family:'Segoe UI';font-style:normal;color:darkgreen;font-size:40px;" id="pod-naslov2">N<font color="white">a</font><font color="darkblue">jno</font><font color="darkorange">vije</font>&nbsp;<font color="whitesmoke">vesti</font></h1>
        <br/><br/>
        <a href src="google.com"><p style="font-family:'Segoe UI';font-style:normal;color:white;font-size:40px;" id="vesti1">Neki tekst!<br/><font size="-1" id="pod-naslov">Đaci VII/1 su napravili pano o Prvom svetskom ratu. <br/>Više informacije...</font></p></a>
            <a href src="google.com"><p style="font-family:'Segoe UI';font-style:normal;color:white;font-size:40px;" id="vesti2">Neki tekst!<br/><font size="-1" id="pod-naslov">Đaci VII/1 su napravili pano o Prvom svetskom ratu. <br/>Više informacije...</font></p></a>
            <a href src="google.com"><p style="font-family:'Segoe UI';font-style:normal;color:white;font-size:40px;" id="vesti3">Neki tekst!<br/><font size="-1" id="pod-naslov">Đaci VII/1 su napravili pano o Prvom svetskom ratu. <br/>Više informacije...</font></p></a>
            <a href src="google.com"><p style="font-family:'Segoe UI';font-style:normal;color:white;font-size:40px;" id="vesti4">Neki tekst!<br/><font size="-1" id="pod-naslov">Đaci VII/1 su napravili pano o Prvom svetskom ratu. <br/>Više informacije...</font></p></a>
    </body>

</html>

Any helps? Thanks advance!

html css

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Going to mobile view, the bar has coded to be 100vw, but it's extending site in width, which I don't want

Sources

Related Questions