enter image description here Hello. It does not go out to bring the logo in the center. Left and right should be links, and the logo in the center. I would be grateful for the help.

* { margin: 0; padding: 0; } body { font-family: 'Montserrat', sans-serif; font-size: 15px; margin: 0 auto; } .cover { /*text-align: center;*/ position: relative; background: url('images/index_cover.jpg'); background-size: cover; color: #fff; height: 100vh; } .cover .mask{ position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; background: #333; opacity: 0.4; } #case_head { background: #000; position: relative; top: 15px; } /*.logo { top: 15px; display: inline-block; text-align: center; }*/ .logo { /*background: url('images/logo.png') no-repeat center;*/ width: 155px; height: 148px; margin: 0 auto; display: inline-block; } .user { display: inline-block; float: right; } .user a { text-transform: uppercase; } .menu { float: left; display: inline-block; } 
 <!DOCTYPE html> <html lang="ru-RU"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Кемпинг Рыбчино</title> <!-- Load fonts --> <link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'> <!-- Load css styles --> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div class="cover"> <div class="mask"></div> <div id="case_head"> <div class="menu"> <a href="/">меню</a> </div> <div class="logo"> <img src="images/logo.png"> </div> <div class="user"> <a href="/">Войти</a> <a href="/">Регистрация</a> </div> </div> </div> 

1 answer 1

The simplest is to use flex, as in the code below. But you can without it.

 * { margin: 0; padding: 0; } body { font-family: 'Montserrat', sans-serif; font-size: 15px; margin: 0 auto; } .cover { /*text-align: center;*/ position: relative; background: url('images/index_cover.jpg'); background-size: cover; color: #fff; height: 100vh; } .cover .mask{ position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; background: #333; opacity: 0.4; } #case_head { background: #000; position: relative; top: 15px; height: 148px; display: flex; justify-content: space-between; } .menu { } .logo { } .user { } .user a { text-transform: uppercase; } 
 <!DOCTYPE html> <html lang="ru-RU"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Кемпинг Рыбчино</title> <!-- Load fonts --> <link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'> <!-- Load css styles --> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div class="cover"> <div class="mask"></div> <div id="case_head"> <div class="menu"> <a href="/">меню</a> </div> <div class="logo"> <img src="images/logo.png"> </div> <div class="user"> <a href="/">Войти</a> <a href="/">Регистрация</a> </div> </div> </div>