подскажите как можно растянуть полоски возле заголовка на всю ширину контейнера + так чтобы края закругленные оставались видны
Пробовал разное но так и не смог добиться, последний код залил
https://jsfiddle.net/924z8n6c/
Или может вообще как то по другому сделать
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<section class="why_we">
<div class="container">
<h2 class="section_title">
<span>Почему мы?</span>
</h2>
</div>
</section>
</body>
</html>
body {
font-family: 'Roboto', sans-serif;
color: #fff;
background-color: #000;
font-size: 15px;
padding: 0;
margin: 0;
}
.container {
width: 1140px;
margin: 0 auto;
}
.section_title {
margin-bottom: 100px;
font-size: 40px;
font-weight: 700;
text-align: center;
width: 100%;
text-transform: uppercase;
}
.section_title > span {
position: relative;
padding: 0 15px;
display: inline-block;
}
.section_title > span:before, .section_title > span:after {
content:"";
width: 100%;
position: absolute;
right: 100%;
top: 50%;
margin-top: -5px;
border-radius: 30px;
background-color: #0dadb3;
box-shadow: 0px 0px 25px 2px rgb(13 173 179);
height: 10px;
}
.section_title > span:after {
left: 100%;
}
/* 992px - 1200px */
@media screen and (max-width: 1200px) {
.container {
width: 960px;
}
}
/* 768px - 992px */
@media screen and (max-width: 992px) {
.container {
width: 720px;
}
}
/* 576px - 768px */
@media screen and (max-width: 768px) {
.container {
width: 540px;
}
}
/* 320px - 576px */
@media screen and (max-width: 576px) {
.container {
width: 90%;
}
}