画像がどうしても左にまわらない

画像がどうしても左にまわらないです。htmlに

<div align="left">
   <img class="detailimg" src="{% static 'detail.jpg' %}" alt="詳細">
</div>

と書きました。align="left"と指定しているのに、左に寄りませんでした。それで
cssに

.detailimg{   
display: flex;   
margin-top:100px  
margin-left:100px;
 }

と書いても左によらず

.detailimg{   
float: left;   
 }

と書いても左によりませんでした。
htmlに

<div class="container">
   <img class="detailimg" src="{% static 'detail.jpg' %}" alt="詳細">
</div>

と書いてcssに

.container {
  display: flex;
}

と書いても左によりませんでした。
どう直したら画像を左に寄せられるでしょうか？
html全体には

{% load static%}
 <html lang="ja">
 <head>     
<meta charset="UTF-8">     
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">     
<link rel="stylesheet" href="{% static 'accounts/detail.css' %}">     
<link rel="stylesheet" href="{% static 'bootflat/css/bootflat.min.css' %}">     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>     <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>      <title>XOXO</title> 
</head> 
<body>    
<header class="clearfix">     
<nav>         
<h1 class="box title">XOXO</h1>         
<div class="container">             
<form name="logout" method="post" action="{% url 'accounts:logout' %}">             {% csrf_token %}             
<button type="submit" class="box btn btn-primary" style="color:white">ログアウト</button>             
<input name="next" type="hidden"/>             
</form>        
</div>      
</nav>   
</header>     
<div align="left">    
<img class="detailimg" src="{% static 'detail.jpg' %}" alt="詳細">    
</div>     
<div class="icon_wrapper">    
<h3>I love you</h3>    
<p>miss you</p>    
</div> 
</body>
 </html>

とコードをかいてcss全体には

*{
    margin: 0;
    padding: 0;
}
.clearfix::after{
    content: "";
    clear: both;
    display: block;
}
header{
    width: 100%;
    height: 100px;
    background-color: pink;
}
nav{
    width: 90%;
    height: 60px;
    margin: 0 auto;
    text-align: left;
}

.top-menu{
    float: right;
}

.box{
    float: left;
    float:left;
    color:white;
    margin-top:10px;
    padding-top:-30px;
    padding-bottom:30px;
    padding-left:80px;
    padding-right:80px;
}

.title{
   font-size: 70px;
}

.detailimg{
  float: left;
  display: flex;
}

Lhankor_Mhy

2017/10/03 11:48

『左にまわらない』とは具体的にどういう状況ですか。状況を再現できるコードを提示してください。

x_x

2017/10/03 11:56

https://teratail.com/questions/94764 とは違うのでしょうか？

退会済みユーザー

2017/10/03 12:00

htmlとcssの全体をアップロードしました。class="detailimg　の位置が左にならないということです

退会済みユーザー

2017/10/03 12:01

はい、その質問とは違います

Lhankor_Mhy

2017/10/03 12:38

そういや、なんでサブアカ使ってるんです？

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

回答2件

h1要素に引っかかってるので、適切に高さを調整してみてください。
あと、開発者ツールを使ってください。カンでCSSを触っても上手くいかないですよ。

投稿2017/10/03 12:35

Lhankor_Mhy

総合スコア36115

ベストアンサー

どうですか？

.title{
   font-size: 70px;
   height: 60px;
}

投稿2017/10/03 12:29

退会済みユーザー

総合スコア0

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

画像がどうしても左にまわらない

関連した質問