Goodnight! I came face to face with such a problem, I can not align the button along the same lines with the counter, if I make the button below, then the counter will certainly move, how to fix the situation?
CSS:
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700'); * { font-family: 'Open Sans', sans-serif; } html, body { padding: 0; margin: 0; } .header { background-image: url('img/headbackground.png'); background-repeat: no-repeat; position: relative; width: 100%; height: 140px; display: inline-block; background-size: cover; } .logo { width: auto; height: auto; position: relative; margin-top: 9%; } p.inheader { font-family: 'Open Sans', sans-serif; font-size: 1.875em; position: relative; color: #fff; margin-top: 1.6%; font-weight: bold; } p.outcounter { font-family: 'Open Sans', sans-serif; font-size: 1.125em; position: relative; color: #fff; margin-top: 1%; margin-left: 1%; font-weight: bold; display: inline; } p.incounter{ font-family: 'Open Sans', serif; font-size: 1.313em; position: relative; color: #fff; display: inline-block; margin-left: 0.3%; margin-top: 1%; font-weight: bold; border: 1px solid #fff; border-radius: 3px; padding: 8px 3px; } p.outcounter2 { font-family: 'Open Sans', sans-serif; font-size: 1.125em; position: relative; color: #fff; margin-top: 1%; margin-left: 12%; font-weight: bold; display: inline; } div.button { width: 278px; height: 45px; background: #2aaa3d; border-radius: 15px; box-shadow: 0 -6px #008729 inset; transition: 0.3s; } div.button:hover { background: #008729; box-shadow: 0 -6px #007223 inset; } @media screen and (max-width: 1366px) { p.inheader{font-size: 4vw;} p.incounter{font-size: 1em;} p.outcounter{font-size: 1em;} p.outcounter2{font-size: 1em;} } @media screen and (max-width: 1300px) { .header{height: 300px;} .logo{display:block; margin:10px auto 20px;} } HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Snow</title> <link rel="shortcut icon" type="favicon" href="favicon.ico"/> <link rel="stylesheet" href="css/bootstrap.css"/> <link rel="stylesheet" href="css/bootstrap-theme.css"/> <link rel="stylesheet" href="css/font-awesome.css"/> <link rel="stylesheet" href="css/font-awesome.min.css"/> <link rel="stylesheet" type="text/css" href="styles.css"/> <meta name="viewport" content="width=450, initial-scale=1.0"/> </head> <body> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <div class="header"> <div class="col-sm-offset-1 col-md-2 col-xs-12 col-lg-2"> <a href="#"><img src="img/logo.png" class="logo"></a> </div> <div class="col-md-6 col-xs-12 col-lg-6"> <p class="inheader">Все заявки и поставщики в одном месте</p> <p class="outcounter">Заявок вчера:</p><p class="incounter">4</p><p class="incounter">1</p><p class="incounter">3</p> <p class="outcounter2">Заявок сегодня:</p><p class="incounter">4</p><p class="incounter">1</p><p class="incounter">3</p> <div class="button"></div> </div> </div> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="js/bootstrap.min.js"></script> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html> 
