Centering #Menu #Nav on the circular shapes page?

Question

This is the HTML of this section:

home
  #home.scroll
  br
  br
  .container
    .row
      a.scroll href="#oquee"
        .cir O que é
      a.scroll href="#local"
        .cir Local
      a.scroll href="#convidado"
        .cir Convidado
      a.scroll href="#contato"
        .cir Contato
      a.scroll href="#inscricao"
        .cir Inscrição

Good morning, I wonder how I could leave these circles next to each other, and centered on the page ? I have a landingpage to deliver on today’s date.

I already tried when applying display: inline; but he makes the following mistake

this is the css I inserted:

.cir {
    background-color:#135d62;
    color:#fff;
    width:120px;
    height:120px;
    line-height:120px;
    vertical-align:middle;
    text-align:center;
    font-size: 18px;
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    display: inline;
}

How can I place each circle next to each other and then center ? Because I tried with Bootstrap’s Grid system but it is not centralized.

like this with the bootstrap:

html bootstrap

home
  #home.scroll
  br
  br
  .container
    .row
      .col-md-2
        a.scroll href="#oquee"
          .cir O que é
      .col-md-2
        a.scroll href="#local"
          .cir Local
      .col-md-2
        a.scroll href="#convidado"
          .cir Convidado
      .col-md-2
        a.scroll href="#contato"
          .cir Contato
      .col-md-2
        a.scroll href="#inscricao"
          .cir Inscrição

Thanks in advance for your attention.

Answer 1

try to use float:left in the circles to place them side by side. Center using a container and defining margin: auto; and align: center; Remembering that the container width has to be the space that the circles occupy, set fixed;

For example:

.cir {
    background-color:#135d62;
    color:#fff;
    width:120px;
    height:120px;
    line-height:120px;
    vertical-align:middle;
    text-align:center;
    font-size: 18px;
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    margin-right: 20px;
}

.espacador{ /*como você não quer os circulos colados...*/
 margin: 0px;
 width: 140px;
 height: 120px;
 float: left;
}



#container{
 width: 420px;
 height: 120px;
 margin: auto;
 align: center;
}

<div id="container">
 <div class="espacador">
  <div class="cir"></div>
 </div>
 <div class="espacador">
  <div class="cir"></div>
 </div>
 <div class="espacador">
  <div class="cir"></div>
 </div>
</div>

Answer 2

On another matter, I’ve already given a reply to solve a similar problem.

I adapted the code to center the circles.

.master {
  border: solid 1px #000;
  font-size: 0;
  text-align: center;
}
.master div {
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  margin: 10px;
  width: 100px;
  line-height: 100px;
  background-color: #229922;
  font-size: 40px;
}
body {
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="$('.master').width($('.master').width()-25)">Clique para reduzir largura em 25px</button>
<button onclick="$('.master').width($('.master').width()+25)">Clique para aumentar largura em 25px</button>
<div class="master">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>