Всем привет, не могу понять почему border шире самого элемента
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
background: #2F3136;
overflow-x: hidden;
}
.header1 {
padding: 1px 0px 0px 4px;
font-family: 'Century Gothic';
color: #A6A7A8;
height: 22px;
margin: 0 auto;
background: #202225;
border: 2px solid #202225;
width: 100%;
position: absolute;
}
.content {
border-radius: 8px;
margin-top: 100px;
margin-left: 400px;
background: #202225;
color: white;
border: 2px solid #202225;
width: 1300px;
height: 800px;
position: absolute;
}
.contentimage {
margin-top: 120px;
margin-left: 200px;
width: 1000px;
height: 600px;
position: absolute;
}
.paspartu {
margin: 0px;
padding: 0px;
border: 5px solid grey;
}
.leftside {
color: white;
background: #202225;
border: 2px solid #202225;
top: 0;
bottom: 0;
margin-top: 27px;
width: 80px;
position: absolute;
}
ul li {
background: #090214;
border-top: 7px solid #090214;
border-left: 7px solid #090214;
border-right: 7px solid #090214;
width: 75%;
margin-left: 3px;
margin-top: 15px;
border-radius: 18px;
list-style-type: none;
transition: 0.5s;
}
ul li:hover {
background: #090214;
border-top: 7px solid #090214;
border-left: 7px solid #090214;
border-right: 7px solid #090214;
width: 75%;
margin-left: 3px;
margin-top: 15px;
border-radius: 7px;
list-style-type: none;
transition: 0.5s;
}
<div class='header1'>Discord</div>
<div class='leftside'>
<ul>
<div class='rounded'>
<li><img width=1 00% src='pro.jpg'></li>
<li><img width=1 00% src='pro.jpg'></li>
<li><img width=1 00% src='pro.jpg'></li>
<li><img width=1 00% src='pro.jpg'></li>
<li><img width=1 00% src='pro.jpg'></li>
</div>
</ul>
</div>
<div class='content'>
<div class='contentimage'>
<div class='paspartu'>
<img width=50% src='text.jpg'>
</div>
</div>
</div>