Witam mam problem ze stroną którą robię dla osobistego rozwoju. Mianowicie po dodaniu zdjęcia pod tekstem
<div class="text">Tworzenie stron internetowych.</div>
<div class="img"><img src="-1869306_640.jpg"></div>
Strona samoistnie się poszerza przez co pojawiają się scrolle. Jak temu zaradzić ?
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<!--sposób wyświetlania na urządzeniach mobilnych -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>C.H</title>
<link rel="stylesheet" href="style1.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="css/fontello.css" type="text/css" />
</head>
<body>
<header>
<div class="top-nav-bar">
<div class="logo">Computer Help</div>
<nav class="top-nav">
<ul>
<i class="icon-facebook-rect"></i>
<i class="icon-youtube"></i>
<i class="icon-twitter-rect"></i>
</ul>
</nav>
</div>
<div class="picture"></div>
</header>
<nav class="center-nav">
<a class="menu" href="#">Strona Główna</a><a class="menu" href="#">Firma</a><a class="menu" href="#">Czym się zajmujemy?</a><a class="menu" href="#">Kontakt</a>
</nav>
<section class="container">
<article class="home">
<div class="index">
Firma
</div>
<div class="tekst">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pretium sed mauris sed gravida. Mauris bibendum metus elit, a placerat enim pharetra suscipit. Sed sed placerat neque. Quisque sed justo nec nibh posuere placerat. Aenean a elit nec libero egestas dictum. Vivamus euismod urna nec ligula accumsan rhoncus. Phasellus ligula nisi, varius at felis eu, ullamcorper condimentum purus. Vestibulum et lobortis eros. Proin ullamcorper faucibus ligula sit amet vehicula. In consectetur, felis eu hendrerit faucibus, risus tellus molestie risus, in ultricies urna quam eu ex. Maecenas ultrices nibh posuere dolor feugiat porttitor. Integer bibendum, ex ut interdum rhoncus, neque mauris congue lacus, at euismod eros dolor finibus justo. Aenean malesuada pretium quam, lacinia placerat est laoreet in. In ut leo in leo tristique luctus.
Proin posuere ex nec maximus aliquam. Phasellus elementum, enim ut ultrices porta, purus nibh vehicula dui, ullamcorper congue sapien purus vel nisl. Ut sit amet dapibus sem. Maecenas consectetur magna facilisis est facilisis, malesuada interdum est sollicitudin. Etiam at tellus malesuada, hendrerit velit vel, rhoncus arcu. Aenean vitae nunc massa. Nullam sollicitudin mattis odio non interdum. Pellentesque rutrum tortor ac bibendum feugiat. Nam ornare nisl vitae feugiat vulputate. Pellentesque quis enim nec massa lobortis consequat nec nec nibh. Etiam quis augue ullamcorper lectus tristique vehicula id id lacus. Maecenas mollis eros lorem, id rutrum odio sollicitudin id. Donec viverra nibh iaculis vehicula accumsan.
</div>
</article>
<article class="work">
<div class="index">
Czym się zajmujemy?
</div>
<div class="working">
<div class="worker">
<div class="text">Naprawa komputera.</div>
</div>
<div class="worker">
<div class="text">Optymalizowane systemów operacyjnych.</div>
</div>
<div class="worker">
<div class="text">Naprawa podzespołów.</div>
</div>
<div class="worker">
<div class="text">Tworzenie stron internetowych.</div> <div class="img"><img src="-1869306_640.jpg"></div>
</div>
</div>
</article>
</section>
</body>
</html>
* {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}
body{
background-image: url(bright_squares.png);
}
header{
width: 100vw;
}
.top-nav-bar{
background-color: black;
width: 100vw;
height: 40px;
border-bottom: 1px solid #9b9b9b;
}
.logo
{
float: left;
color: white;
padding: 8px;
letter-spacing: 5px;
font-style: italic;
margin-left: 10px;
margin-top: 5px;
}
.top-nav{
display: flex;
float: right;
font-size: 22px;
color: white;
justify-content: right;
}
.icon-facebook-rect{
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.icon-youtube{
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.icon-twitter-rect{
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.icon-facebook-rect:hover{
color: #4267b2;
}
.icon-youtube:hover{
color: #d94348;
}
.icon-twitter-rect:hover{
color: #3095d3;
}
ul{
padding: 8px;
}
li{
display: inline;
padding: 8px;
text-decoration: none;
}
.picture{
width: 100vw;
height: 150px;
background-image: url(usb-1284227_1920.jpg);
background-size: cover;
background-position: center;
filter: brightness(150%);
}
.center-nav{
border-top: 1px solid #9b9b9b;
background-color: rgba(0, 0, 0, 0.81);
height: 40px;
width: 100vw;
}
a.menu{
text-decoration: none;
text-align: center;
color: white;
height: 34px;
display: inline-block;
padding-top: 7px;
font-size: 20px;
width:25%;
letter-spacing: 5px;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
a.menu:hover{
background-color: rgba(74, 74, 74, 0.71);
}
.container{
display: flex;
flex-direction: column;
justify-content: center;
background-color: rgba(255, 0, 0, 0.23);
margin: 0 20px 0 20px;
}
.work{
margin: auto;
justify-content: center;
}
.index{
text-align: center;
margin-bottom: 10px;
margin-top: 5px;
font-size: 25px;
letter-spacing: 5px;
}
.tekst{
margin: 0 5px 0 5px;
}
.working{
margin: 5px 5px 5px 5px;
}
.worker{
text-align: center;
display: inline-block;
width: 45%;
margin: 5px 15px 5px 15px;
}
.text{
font-size: 19px;
}
img{
width: 500px;
border-radius: 40px;
}
