サイトのデザインについて

二点わからないことがあります
●右端のバーでに表示されているログアウトアイコンの位置をバーの真ん中におきたい
●商品の説明文と写真を枠線を用いて囲みたいが、これらを包括したdivを用いてもうまく反映されません
以下コードですよろしくお願いします。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8"/>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="Pd.css"/>
</head>
<body>
  <nav class="navbar navbar-inverse">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#gnavi">
        <span class="sr-only">メニュー</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="#" class="navbar-brand">HOGETOWN</a>
    </div>
    <div id="gnavi" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="">Top</a></li>
        <li><a href="">Outer</a></li>
        <li><a href="">Inner</a></li>
        <li><a href="">Backpack</a></li>
        <li><a href="">Footwwear</a></li>
        <li><a href="">Tent</a></li>
        <li><a href="">Burner</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="">Cart</a></li>
        <li><a href="">User:Hayashi</a></li>
        <li><span class="glyphicon glyphicon-log-out" aria-hidden="true" aria-label="Right Align"></span></li>
      </ul>
    </div>
  </nav>
  <div class="ProductAll">
    <div class="Contents">
      <div class="ProductName">
        <p class= "lead">S/S DRY CREW</p>
        <p>THE NORTH FACE</p>
      </div>
      <div class="ProductDetails">
        <p>hogehogehogehoge</p>
      </div>
      <div class="ProductBuy">
        <p>在庫数:100</p>
        <p>価格:￥3856</p>
        <p>個数:<input type="text" name="productCount" value="1">(1~100までを)入力してください</p>
        <p>小計￥3856</p>
      </div>
    </div>
    <div class="ProductPicture">
      <img src="04.jpg"alt="Product">
    </div>
  </div>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
<html>
.ProductAll{
  bottom: 1px rgb(0, 0, 0) solid;
  margin: 50px;
}
.Contents{
  margin: 50px;
  float: left;
}
.ProductName{
  margin:50px;
}
.ProductPicture{
  float: left;
  margin:50px;
  border: 1px rgb(0, 0, 0) solid;
}
.glyphicon glyphicon-log-out{
  color: 
}

行動規範の内容に同意します

回答1件

ベストアンサー

予想されるエラー
・htmlの閉じタグがないです。
・コード内のスタイルコードが<style>内にないです。
・floatが終わってないです。

予想される修正(抜粋)

HTML
1  <div class="ProductAll clearfix">
2

HTML
1</body>
2    <style>
3.ProductAll{
4  bottom: 1px rgb(0, 0, 0) solid;
5  border: 1px solid red;
6  margin: 50px;
7}
8
9.clearfix:after {
10content: ” “;
11display: block;
12clear: both;
13height: 0;
14visibility: hidden;
15}
16
17.Contents{
18  margin: 50px;
19  float: left;
20}
21.ProductName{
22  margin:50px;
23}
24.ProductPicture{
25  float: left;
26  margin:50px;
27  border: 1px rgb(0, 0, 0) solid;
28}
29.glyphicon glyphicon-log-out{
30  color: #333;
31}
32</style>
33</html>