помогите с версткой

[9976069]

почему значки сьезжают

<header>
  <div class="container">
    <div class="row">
      <div class="col-sm-3">
        <div id="logo">{% if logo %}<a href="{{ home }}"><img src="{{ logo }}" title="{{ name }}" alt="{{ name }}" class="img-responsive" /></a>{% else %}
          <h1><a href="{{ home }}">{{ name }}</a></h1>
          {% endif %}</div>
      </div>
      <div class="col-sm-3">{{ search }}</div>
      <div class="col-sm-3">
            <div class="adress">
               <p><i class="fa fa-map-marker"></i> Адрес: {{storeaddress}}</p>
               <p><i class="fa fa-phone"></i>Телефон: {{ telephone }}</p>
            </div>
     </div>

    <div class="col-sm-3">
    <div class="knopki">
		<a href="{{ wishlist }}" id="wishlist-total" title="{{ title_wishlist }}"><i class="fa fa-heart"></i></a>
		<a href="{{ compare }}" id="compare-total" title="{{ title_compare }}"><i class="fa fa-exchange"></i> </a>
         {{ cart }}
</div>
</div>

    
</header>

получается https://clip2net.com/s/4byEgUR аа хочется чтоб были в одну строку

[9976069]

css но он вроде не режет 

.knopki i {
font-size: 47px;
margin-right: 7px;
color: #2199c7;}
.adress p {
font-size: 15px;
text-align: center;}

 

[searchingman]

Для начала проверьте верстку на валидность. Возможно теги не закрыты.

[9976069]

On 4/4/2021 at 8:49 PM, searchingman said:

Для начала проверьте верстку на валидность. Возможно теги не закрыты.

спасибо проверил не помогло

[SiteMix]

Блоку knopki не хватает места в ряду.

[kosh2323]

Потому как это верстка bootstrap, каждому блоку у Вас отведено 4 из 12 полос, поэтому так всё и сжимается, можно сделать, каждому блоку назначить 3 из 12, т.е. col-sm-4, а адрес и телефон переносить выше, например с col-sm-6, только там добавить float:right;, по умолчания содержимое блоков выравнивается влево, т.е. float:left, а может и не надо, длинный адрес и телефон, от середины до правого края пойдет.Кроме того, чтоб было в одну строку, задавайте списком без всяких<P>, используйте стили bootastrap-а, которые там уже есть, типа

<div id="top-links" class="nav pull-left">
        
        <ul class="list-inline">
      
          <li><a href="{{ адрес ссылки}}">Ваша ссылка</a></li>
        
        </ul>
      </div>