1

Верстаю шаблон, использую bootstrap. Столкнулся с такой проблемой: есть row, в нем ul и 3 li, каждому из которых присвоен клас col-lg-4. Ширина row и ul равна 1060px при заданной ширине экрана, а колонки получается меньше чем на треть этой ширины. Нем могу понять в чем проблема, ведь никаких педдингов и маргинов нет.введите сюда описание изображения На картинке над этими li серый бордер, равный по ширине ul и row. Подскажите пожалуйста в чем может быть проблема.

body {
	font-family: "RobotoRegular", sans-serif;
	font-size: 14px;
}

h1 {
	font-size: 60px;
}

h2 {
	font-size: 50px;
}

h3 {
	font-size: 40px;
}

h4 { 
	font-size: 24px;
}

h5 {
	font-size: 20px;
}

.container-fluid {
  padding: 0;
}

.row {
  margin-left: 10px;
  margin-right: 10px;
}

header {
  background-color: #333333;
  height: 135px;
}

header .row {
  height: 135px;
}

header h1 {
  color: #eeeeee;
  position: relative;
  vertical-align: middle;
  display: inline;
  
}

.studio { 
  margin-top: 60px;
  padding-left: 0px;
 }

.navigation {
  margin-top: 85px;
}

 .navbar {
  margin-bottom: 0px;
 }

.navbar-collapse {
  padding-right: 0px;
}

.navbar-inverse {
	background-color: transparent;
	border-color: transparent;
} 

.navbar-inverse .navbar-nav li {
	color: #eeeeee;
}

.navbar-nav  li  a {
  position: relative;
  padding-bottom: 0px;
  vertical-align: bottom;
}

.navbar-inverse .navbar-nav li a:hover {
	color: #00aeef;
}

.maindescription {
  padding-bottom: 40px;
  border-bottom:  2px solid #bbbbbb;
  margin-bottom: 40px;
}


.service {
	text-align: center;
}

.service h3 {
	color: #ffffff;
	padding-bottom: 20px;
	border-bottom: 2px solid #f4fafe;
	margin-left: 5%;
	margin-right: 5%;
  margin-bottom: 20px;
} 

.panel-body > p {
  margin-left: 3%;
  margin-right: 3%;
}

content ul li { 
  list-style-type: none;
  display: block; 
  margin: 0 auto;
 }

.panel { 
  /*max-width: 285px;*/
  width:100%;
  background-color: #00aeef;
  border-radius: 0px;
  border: none;
  box-shadow: 3px 3px 10px #c7c7c7;
  display: block; 
  margin: 0 auto;
  margin-bottom: 15px;
 }

.btn {
  border-radius: 0px;
 }

.btn-primary:active {
  background-color: #286090;
  border-color: #204d74;
}

.btn-primary:hover {
    background-color: #286090;
    border-color: #204d74;
  }

button {
  text-decoration: none;
  color: #ffffff;
  text-transform: uppercase;
  box-shadow: inset 0px 0px 5px 1px #165f7a; 
 }


content h2 {
  color: #333333;
}

content h2 span {
  color: #00bff3;
}

content h3 {
  color: #bbbbbb;
}

content h4 {
  color: #555555;
}


.about {
  padding-bottom: 40px;
  border-bottom:  2px solid #bbbbbb;
  margin-bottom: 40px;
}



.services {
  padding-bottom: 25px;
  border-bottom:  2px solid #bbbbbb;
  margin-bottom: 40px;
}

/*MEDIA*/

/* LG devices, Wide Screens */
@media only screen and (min-device-width : 1200px) {

.row {
  margin-left: 70px;
  margin-right: 70px;
}

}


/* MD devices, Wide Screens */
@media only screen
and (min-device-width : 992px) 
and (max-device-width : 1199px) {


.maindescription {
  padding-bottom: 40px;
  border-bottom:  2px solid #bbbbbb;
  margin-bottom: 40px;
}


#bs-example-navbar-collapse-2 {
  display: inline-block;
  max-width: 450px;
 }
 .navbar .navbar-inverse {
    display: inline-block;
    max-width: 450px;
 }

 .studio {
  padding-right: 0px;
 }

 .navigation {
  padding-left: 0px;
  padding-right: 0px;
 }

li a {
  padding-right: 0px;
}

.collapse {
  margin-right: 0px;
}

}


/* SM Devices, Desktops */
@media only screen
and (min-device-width : 768px) 
and (max-device-width : 991px) {

h1 {
  font-size: 60px;
} 

.studio {
  margin-top: 0px;
}

.navigation {
  margin-top: 43px
}

.row {
margin-left: 20px;
margin-right: 20px;
}

.panel-body {
  padding-left: 5px;
  padding-right: 5px;
 }

.col-sm-4 {
  padding-left: 5px;
  padding-right: 5px;
}

content li .col-sm-6 {
  margin: auto;
}


}


/* XS devices */
@media only screen
and (min-device-width : 320px) 
and (max-device-width : 767px) {


.studio { 
  margin-top: 0px;
}

.navigation {
  margin-top: 75px;
}



.navbar-toggle { 
	background-color: #333;
  margin-right: 30px;
 }

 .navbar-inverse .navbar-nav li {
 	text-align: right;
 }

 .navbar-inverse .navbar-toggle {
    border-color: #fff;
}

}
<div class="container-fluid">
    <header>
      <div class="row">
        <div class="studio col-lg-6 col-md-6 col-sm-4  col-xs-6">
          <h1>Design Studios</h1>
        </div>
        <!-- <div class="container-fluid"> -->
        <div class="navigation col-lg-6 col-md-6 col-sm-8 col-xs-6">
          <nav class="navbar navbar-inverse"> <!-- CДЕЛАТЬ-->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
              <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Contact Us</a></li>
              </ul>
            </div>
            <!-- </div> -->
          </nav>
        </div>
      </header>
  <content>  
    <div class="row maindescription">
      <h2>Clean <span><strong>&</strong></span> Professional Web Design</h2>
      <h3>Providing High Quality Web Solutions</h3>
    </div>
    <div class="row about">
      <h4>We provide <strong>first class</strong> web solutions for organizations and small 
          businesses looking to make a <strong>big impact</strong> online. Our services include web design, online marketing campaigns, and search engine optimization.</h4>
    </div>
    <div class="row services">
        <ul>
          <li class="service col-lg-4 col-md-4 col-sm-6 col-xs-12 ">
            <div class="panel panel-default">
              <div class="panel-body">
                <h3>web design</h3>
                <p>We provide web design solutions of the very highest order. We’ll work with you from the start to understand your exact requirements and will  continuosly work with you to ensure that you’re happy with the final site that you purchase.</p>
                <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
                  get more details>>
                </button>
              </div>
            </div>  
          </li>
          <li class="service col-lg-4 col-md-4 col-sm-6 col-xs-12">
            <div class="panel panel-default">
              <div class="panel-body">
                <h3>marketing</h3>
                <p>We can help you promote your business in both the online and offline worlds. We specialize in a range of fields from viral marketing campaigns to managing paid advertising accounts for you. Your brand will be in safe hands with us.</p>
                <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
                  view case studies>>
                </button>
              </div>
            </div>  
          </li>
          <li class="service col-lg-4 col-md-4 col-sm-6  col-xs-12">
            <div class="panel panel-default">
              <div class="panel-body">
                <h3>optimization</h3>
                <p>Want to drive more traffic to your site? You’ve come the right place! We can increase traffic to your site in an organic and effective manner that will ensure more people are aware of your business and the products/services you offer. </p>
                <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
                  learn more>>
                </button>
              </div>
            </div>  
          </li>
        </ul>
        </div>
      </div>
      <div class="row additional">
        <div class="testimonials col-lg-6">

        </div>
        <div class="projects col-lg-6">
        
        </div>
      </div>
    </content> 
    <footer>
      
    </footer>
    </div>

9
  • В инспекторе браузера посмотрите откуда эти отступы. Ctrl+Shift+I 11 авг 2016 в 10:22
  • @AndreyFedorov Если я не ошибаюсь, то у меня как раз открыт инспектор на скриншоте. В том то и проблема что я не могу понять откуда эти отступы взялись, так как никаких педингов или маргинов там нет, что я и показал на скрине. 11 авг 2016 в 10:31
  • в стандартной конфигурации Bootstrap 3 у каждого класса а-ля col-*-* есть padding-right: 15px; и padding-left: 15px;
    – lexxl
    11 авг 2016 в 10:37
  • @lexxl Да, я знаю, уже убрал их, но все равно так же получается. 11 авг 2016 в 10:40
  • @AlexanderSigida Я же вам уже отвечал откуда "отступы")
    – user192664
    11 авг 2016 в 10:49

1 ответ 1

2
  1. Ваш код не трогает паддинг у <ul>.
  2. Классы от бутсраповских колонок добавляют по 15px паддинга к <li>. Этот паддинг можно перебить, нарпример, с помощью !important для content ul li.

Вот так колонки совсем слипнутся:

content ul { 
  padding: 0;
}
content ul li {
  padding: 0 !important;
}

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

content ul { 
  padding: 0;
}
content ul li {
  padding: 0 !important;
}

body {
	font-family: "RobotoRegular", sans-serif;
	font-size: 14px;
}

h1 {
	font-size: 60px;
}

h2 {
	font-size: 50px;
}

h3 {
	font-size: 40px;
}

h4 { 
	font-size: 24px;
}

h5 {
	font-size: 20px;
}

.container-fluid {
  padding: 0;
}

.row {
  margin-left: 10px;
  margin-right: 10px;
}

header {
  background-color: #333333;
  height: 135px;
}

header .row {
  height: 135px;
}

header h1 {
  color: #eeeeee;
  position: relative;
  vertical-align: middle;
  display: inline;
  
}

.studio { 
  margin-top: 60px;
  padding-left: 0px;
 }

.navigation {
  margin-top: 85px;
}

 .navbar {
  margin-bottom: 0px;
 }

.navbar-collapse {
  padding-right: 0px;
}

.navbar-inverse {
	background-color: transparent;
	border-color: transparent;
} 

.navbar-inverse .navbar-nav li {
	color: #eeeeee;
}

.navbar-nav  li  a {
  position: relative;
  padding-bottom: 0px;
  vertical-align: bottom;
}

.navbar-inverse .navbar-nav li a:hover {
	color: #00aeef;
}

.maindescription {
  padding-bottom: 40px;
  border-bottom:  2px solid #bbbbbb;
  margin-bottom: 40px;
}


.service {
	text-align: center;
}

.service h3 {
	color: #ffffff;
	padding-bottom: 20px;
	border-bottom: 2px solid #f4fafe;
	margin-left: 5%;
	margin-right: 5%;
  margin-bottom: 20px;
} 

.panel-body > p {
  margin-left: 3%;
  margin-right: 3%;
}

content ul li { 
  list-style-type: none;
  display: block; 
  margin: 0 auto;
 }

.panel { 
  /*max-width: 285px;*/
  width:100%;
  background-color: #00aeef;
  border-radius: 0px;
  border: none;
  box-shadow: 3px 3px 10px #c7c7c7;
  display: block; 
  margin: 0 auto;
  margin-bottom: 15px;
 }

.btn {
  border-radius: 0px;
 }

.btn-primary:active {
  background-color: #286090;
  border-color: #204d74;
}

.btn-primary:hover {
    background-color: #286090;
    border-color: #204d74;
  }

button {
  text-decoration: none;
  color: #ffffff;
  text-transform: uppercase;
  box-shadow: inset 0px 0px 5px 1px #165f7a; 
 }


content h2 {
  color: #333333;
}

content h2 span {
  color: #00bff3;
}

content h3 {
  color: #bbbbbb;
}

content h4 {
  color: #555555;
}


.about {
  padding-bottom: 40px;
  border-bottom:  2px solid #bbbbbb;
  margin-bottom: 40px;
}



.services {
  padding-bottom: 25px;
  border-bottom:  2px solid #bbbbbb;
  margin-bottom: 40px;
}

/*MEDIA*/

/* LG devices, Wide Screens */
@media only screen and (min-device-width : 1200px) {

.row {
  margin-left: 70px;
  margin-right: 70px;
}

}


/* MD devices, Wide Screens */
@media only screen
and (min-device-width : 992px) 
and (max-device-width : 1199px) {


.maindescription {
  padding-bottom: 40px;
  border-bottom:  2px solid #bbbbbb;
  margin-bottom: 40px;
}


#bs-example-navbar-collapse-2 {
  display: inline-block;
  max-width: 450px;
 }
 .navbar .navbar-inverse {
    display: inline-block;
    max-width: 450px;
 }

 .studio {
  padding-right: 0px;
 }

 .navigation {
  padding-left: 0px;
  padding-right: 0px;
 }

li a {
  padding-right: 0px;
}

.collapse {
  margin-right: 0px;
}

}


/* SM Devices, Desktops */
@media only screen
and (min-device-width : 768px) 
and (max-device-width : 991px) {

h1 {
  font-size: 60px;
} 

.studio {
  margin-top: 0px;
}

.navigation {
  margin-top: 43px
}

.row {
margin-left: 20px;
margin-right: 20px;
}

.panel-body {
  padding-left: 5px;
  padding-right: 5px;
 }

.col-sm-4 {
  padding-left: 5px;
  padding-right: 5px;
}

content li .col-sm-6 {
  margin: auto;
}


}


/* XS devices */
@media only screen
and (min-device-width : 320px) 
and (max-device-width : 767px) {


.studio { 
  margin-top: 0px;
}

.navigation {
  margin-top: 75px;
}



.navbar-toggle { 
	background-color: #333;
  margin-right: 30px;
 }

 .navbar-inverse .navbar-nav li {
 	text-align: right;
 }

 .navbar-inverse .navbar-toggle {
    border-color: #fff;
}

}
<div class="container-fluid">
    <header>
      <div class="row">
        <div class="studio col-lg-6 col-md-6 col-sm-4  col-xs-6">
          <h1>Design Studios</h1>
        </div>
        <!-- <div class="container-fluid"> -->
        <div class="navigation col-lg-6 col-md-6 col-sm-8 col-xs-6">
          <nav class="navbar navbar-inverse"> <!-- CДЕЛАТЬ-->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
              <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Contact Us</a></li>
              </ul>
            </div>
            <!-- </div> -->
          </nav>
        </div>
      </header>
  <content>  
    <div class="row maindescription">
      <h2>Clean <span><strong>&</strong></span> Professional Web Design</h2>
      <h3>Providing High Quality Web Solutions</h3>
    </div>
    <div class="row about">
      <h4>We provide <strong>first class</strong> web solutions for organizations and small 
          businesses looking to make a <strong>big impact</strong> online. Our services include web design, online marketing campaigns, and search engine optimization.</h4>
    </div>
    <div class="row services">
        <ul>
          <li class="service col-lg-4 col-md-4 col-sm-6 col-xs-12 ">
            <div class="panel panel-default">
              <div class="panel-body">
                <h3>web design</h3>
                <p>We provide web design solutions of the very highest order. We’ll work with you from the start to understand your exact requirements and will  continuosly work with you to ensure that you’re happy with the final site that you purchase.</p>
                <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
                  get more details>>
                </button>
              </div>
            </div>  
          </li>
          <li class="service col-lg-4 col-md-4 col-sm-6 col-xs-12">
            <div class="panel panel-default">
              <div class="panel-body">
                <h3>marketing</h3>
                <p>We can help you promote your business in both the online and offline worlds. We specialize in a range of fields from viral marketing campaigns to managing paid advertising accounts for you. Your brand will be in safe hands with us.</p>
                <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
                  view case studies>>
                </button>
              </div>
            </div>  
          </li>
          <li class="service col-lg-4 col-md-4 col-sm-6  col-xs-12">
            <div class="panel panel-default">
              <div class="panel-body">
                <h3>optimization</h3>
                <p>Want to drive more traffic to your site? You’ve come the right place! We can increase traffic to your site in an organic and effective manner that will ensure more people are aware of your business and the products/services you offer. </p>
                <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
                  learn more>>
                </button>
              </div>
            </div>  
          </li>
        </ul>
        </div>
      </div>
      <div class="row additional">
        <div class="testimonials col-lg-6">

        </div>
        <div class="projects col-lg-6">
        
        </div>
      </div>
    </content> 
    <footer>
      
    </footer>
    </div>

Но не понимаю, зачем понадобился список. Колонки можно сверстать обычными блоками, без <ul> и <li>. Вот вариант с просветом между колонками:

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

content ul { 
  padding: 0;
}
content ul li {
  padding: 0 !important;
}

body {
	font-family: "RobotoRegular", sans-serif;
	font-size: 14px;
}

h1 {
	font-size: 60px;
}

h2 {
	font-size: 50px;
}

h3 {
	font-size: 40px;
}

h4 { 
	font-size: 24px;
}

h5 {
	font-size: 20px;
}

.container-fluid {
  padding: 0;
}

.row {
  margin-left: 10px;
  margin-right: 10px;
}

header {
  background-color: #333333;
  height: 135px;
}

header .row {
  height: 135px;
}

header h1 {
  color: #eeeeee;
  position: relative;
  vertical-align: middle;
  display: inline;
  
}

.studio { 
  margin-top: 60px;
  padding-left: 0px;
 }

.navigation {
  margin-top: 85px;
}

 .navbar {
  margin-bottom: 0px;
 }

.navbar-collapse {
  padding-right: 0px;
}

.navbar-inverse {
	background-color: transparent;
	border-color: transparent;
} 

.navbar-inverse .navbar-nav li {
	color: #eeeeee;
}

.navbar-nav  li  a {
  position: relative;
  padding-bottom: 0px;
  vertical-align: bottom;
}

.navbar-inverse .navbar-nav li a:hover {
	color: #00aeef;
}

.maindescription {
  padding-bottom: 40px;
  border-bottom:  2px solid #bbbbbb;
  margin-bottom: 40px;
}


.service {
	text-align: center;
}

.service h3 {
	color: #ffffff;
	padding-bottom: 20px;
	border-bottom: 2px solid #f4fafe;
	margin-left: 5%;
	margin-right: 5%;
  margin-bottom: 20px;
} 

.panel-body > p {
  margin-left: 3%;
  margin-right: 3%;
}

content ul li { 
  list-style-type: none;
  display: block; 
  margin: 0 auto;
 }

.panel { 
  /*max-width: 285px;*/
  width:100%;
  background-color: #00aeef;
  border-radius: 0px;
  border: none;
  box-shadow: 3px 3px 10px #c7c7c7;
  display: block; 
  margin: 0 auto;
  margin-bottom: 15px;
 }

.btn {
  border-radius: 0px;
 }

.btn-primary:active {
  background-color: #286090;
  border-color: #204d74;
}

.btn-primary:hover {
    background-color: #286090;
    border-color: #204d74;
  }

button {
  text-decoration: none;
  color: #ffffff;
  text-transform: uppercase;
  box-shadow: inset 0px 0px 5px 1px #165f7a; 
 }


content h2 {
  color: #333333;
}

content h2 span {
  color: #00bff3;
}

content h3 {
  color: #bbbbbb;
}

content h4 {
  color: #555555;
}


.about {
  padding-bottom: 40px;
  border-bottom:  2px solid #bbbbbb;
  margin-bottom: 40px;
}



.services {
  padding-bottom: 25px;
  border-bottom:  2px solid #bbbbbb;
  margin-bottom: 40px;
}

/*MEDIA*/

/* LG devices, Wide Screens */
@media only screen and (min-device-width : 1200px) {

.row {
  margin-left: 70px;
  margin-right: 70px;
}

}


/* MD devices, Wide Screens */
@media only screen
and (min-device-width : 992px) 
and (max-device-width : 1199px) {


.maindescription {
  padding-bottom: 40px;
  border-bottom:  2px solid #bbbbbb;
  margin-bottom: 40px;
}


#bs-example-navbar-collapse-2 {
  display: inline-block;
  max-width: 450px;
 }
 .navbar .navbar-inverse {
    display: inline-block;
    max-width: 450px;
 }

 .studio {
  padding-right: 0px;
 }

 .navigation {
  padding-left: 0px;
  padding-right: 0px;
 }

li a {
  padding-right: 0px;
}

.collapse {
  margin-right: 0px;
}

}


/* SM Devices, Desktops */
@media only screen
and (min-device-width : 768px) 
and (max-device-width : 991px) {

h1 {
  font-size: 60px;
} 

.studio {
  margin-top: 0px;
}

.navigation {
  margin-top: 43px
}

.row {
margin-left: 20px;
margin-right: 20px;
}

.panel-body {
  padding-left: 5px;
  padding-right: 5px;
 }

.col-sm-4 {
  padding-left: 5px;
  padding-right: 5px;
}

content li .col-sm-6 {
  margin: auto;
}


}


/* XS devices */
@media only screen
and (min-device-width : 320px) 
and (max-device-width : 767px) {


.studio { 
  margin-top: 0px;
}

.navigation {
  margin-top: 75px;
}



.navbar-toggle { 
	background-color: #333;
  margin-right: 30px;
 }

 .navbar-inverse .navbar-nav li {
 	text-align: right;
 }

 .navbar-inverse .navbar-toggle {
    border-color: #fff;
}

}
<div class="container-fluid">
    <header>
      <div class="row">
        <div class="studio col-lg-6 col-md-6 col-sm-4  col-xs-6">
          <h1>Design Studios</h1>
        </div>
        <!-- <div class="container-fluid"> -->
        <div class="navigation col-lg-6 col-md-6 col-sm-8 col-xs-6">
          <nav class="navbar navbar-inverse"> <!-- CДЕЛАТЬ-->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
              <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Contact Us</a></li>
              </ul>
            </div>
            <!-- </div> -->
          </nav>
        </div>
      </header>
  <content>  
    <div class="row maindescription">
      <h2>Clean <span><strong>&</strong></span> Professional Web Design</h2>
      <h3>Providing High Quality Web Solutions</h3>
    </div>
    <div class="row about">
      <h4>We provide <strong>first class</strong> web solutions for organizations and small 
          businesses looking to make a <strong>big impact</strong> online. Our services include web design, online marketing campaigns, and search engine optimization.</h4>
    </div>
    <div class="row services">
          <div class="service col-lg-4 col-md-4 col-sm-6 col-xs-12 ">
            <div class="panel panel-default">
              <div class="panel-body">
                <h3>web design</h3>
                <p>We provide web design solutions of the very highest order. We’ll work with you from the start to understand your exact requirements and will  continuosly work with you to ensure that you’re happy with the final site that you purchase.</p>
                <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
                  get more details>>
                </button>
              </div>
            </div>  
          </div>
          <div class="service col-lg-4 col-md-4 col-sm-6 col-xs-12">
            <div class="panel panel-default">
              <div class="panel-body">
                <h3>marketing</h3>
                <p>We can help you promote your business in both the ondivne and offdivne worlds. We speciadivze in a range of fields from viral marketing campaigns to managing paid advertising accounts for you. Your brand will be in safe hands with us.</p>
                <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
                  view case studies>>
                </button>
              </div>
            </div>  
          </div>
          <div class="service col-lg-4 col-md-4 col-sm-6  col-xs-12">
            <div class="panel panel-default">
              <div class="panel-body">
                <h3>optimization</h3>
                <p>Want to drive more traffic to your site? You’ve come the right place! We can increase traffic to your site in an organic and effective manner that will ensure more people are aware of your business and the products/services you offer. </p>
                <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
                  learn more>>
                </button>
              </div>
            </div>  
          </div>
        </div>
      </div>
      <div class="row additional">
        <div class="testimonials col-lg-6">

        </div>
        <div class="projects col-lg-6">
        
        </div>
      </div>
    </content> 
    <footer>
      
    </footer>
    </div>

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.