左右のpaddingを無くしたいです。

左右のpaddingを0にしたいです。
ですが、paddingを0にしても画面幅いっぱいに広がってしまっています。

html
1<!doctype html>
2<html lang="ja">
3  <head>
4    <!-- Required meta tags -->
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7
8    <!-- Bootstrap CSS -->
9    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
10
11    <link rel="stylesheet" href="style.css">
12    <title>Title</title>
13
14
15  </head>
16  <body>
17    <div class="circle-description">
18      <p class="text-secondary circle-description1">hogehogehogehohogehogheohogehgoe</p>
19  </div>
20    
21
22    <!-- Optional JavaScript -->
23    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
24    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
25    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
26    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
27  
28    
29
30    <script type="text/javascript" src="javascript.js"></script> 
31    
32    <script>
33      $('.navbar-nav>li>a , .dropdown-menu>a').on('click', function(){
34          if(this.id != 'navbarDropdown'){
35            $('.navbar-collapse').collapse('hide');
36          }
37      });
38      </script>
39  </body>
40</html>

CSS
1.circle-description {
2 padding: 0;
3  margin: 2vw 0;
4  font-weight: bold;
5  background: #FFF;
6  border: solid 3px #7c7c7c;/*線*/
7  border-radius: 50px;/*角の丸み*/
8}
9.circle-description p {
10  margin: 0; 
11  padding: 0;
12}
13
14.circle-description1 {
15  text-align: center;
16  padding-right: 0; 
17}
18

よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

ご希望のことはたぶん下記のようなことなのかなと推測しました。

html
1<div class="circle-description">
2  <p class="text-secondary circle-description1">
3Energy (power, gas oil, renewable energy and hydrogen), technology, IT,<br>  infrastucture, engineering, heavy electric machinery and other industries
4  </p>
5</div>

css
1.circle-description {
2  padding: 0;
3  margin: 2vw 0;
4  font-weight: bold;
5  background: #FFF;
6  text-align: center;
7}
8.circle-description p {
9  border: solid 3px #7c7c7c;/*線*/
10  border-radius: 50px;/*角の丸み*/
11  display: inline-block;
12  margin: 0; 
13  padding: 5px 20px;
14}