0
フロントエンド開発にはスーパーですが、最初から好きなウェブサイトを再作成することで、より良くなるように最善を尽くしています。これまでのところ、とても良いですが、なんらかの理由でナビゲーションバーは私の存在の邪魔です。インライン表示でもリストはまだ積み重なっています
現在、Navのリンク（divの内側にあるli）は、私が想像できるだけの幅の問題のために積み重なっています。特定の幅を設定すると、もうスタックされませんが、その幅を設定すると、ボタンを使用して右に揃えることができなくなります。
私がしたいことは、左側に "logo_content" divを& divに整列させてdivにすることです。タブレットブレークポイントを押すと、「nav_content」divがハンバーガーメニューに崩壊します。うまくいけば、この質問は理にかなっています。
ここが私のコードです：
HTML & CSS
body {
font-family: "Open-Sans", Helvetica, sans-serif;
background-color: #ED4C21;
}
.wrapper {
width: 1100px;
max-width: 100%;
margin: 0 auto;
}
nav {
background-color: #ffffff;
border-top: 5px solid #122333;
height: 100px;
margin: 0 auto;
width: 100%;
}
.logo {
font-family: "Khand", Helvetica, sans-serif;
color: #122333;
font-size: 24px;
font-weight: 600;
float: left;
line-height: 0;
padding-top: 17px;
margin-left: 2%;
}
.nav_content {
float: right;
margin: 0 auto;
width: auto;
width: 75%;
}
.nav_links {
margin-left: .5rem;
float: left;
list-style-type: none;
padding-top: 22px;
}
.nav_links li {
display: inline;
margin-left: 4%;
}
.nav_links a {
color: #122333;
text-decoration: none;
font-family: Helvetica, sans-serif;
font-size: 16px;
font-weight: 600;
}
.nav_links a:hover {
color: #ED4C21;
}
.nav_buttons {
float: left;
padding-top: 37px;
}
.button {
font-family: "Khand", Helvetica, sans-serif;
outline: none;
padding: 1rem 1.5rem;
text-decoration: none;
text-align: center;
cursor: pointer;
overflow: hidden;
display: inline;
font-weight: 600;
font-size: 17px;
color: #ffffff;
letter-spacing: 2px;
text-transform: uppercase;
}
.button1 {
background-color: #ED4C21;
}
.button2 {
margin-left: -2px;
background-color: #122333;
}
.button2:hover {
background-color: #ED4C21;
}<!DOCTYPE html>
<html>
<head>
<title>Fast Gear</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Khand:400,500,600" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body>
<header>
<nav>
<div class="wrapper">
<div class="logo">
<h1>Fast Gear</h1>
</div>
<div class="nav_content">
<div class="nav_links">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="nav_buttons">
<div class="button button1">123-456-7890</div>
<div class="button button2">Order Online</div>
</div>
</div>
</div>
</nav>
</header>
</body>
</html>
あなたは、ブートストラップでそれをしたくない理由はありますか？ – BigMonkey89WithaLeg