tweetボタンだけを少し右に動かしたいのですが、margin-leftが効きません。

試したこと：displayをinline-blockにしましたが、動きませんでした。隣にあるfacebookのボタンと同じ間隔にしたいです。コンパイルはしています。よろしくお願いします。

html
1<!DOCTYPE html>
2<html>
3	<head>
4		<meta charset="utf-8">
5		<title>iSara[イサラ] | バンコクのノマドエンジニア育成講座</title>
6		<link rel="stylesheet" href="css/iSara.css">
7	</head>
8	<body>
9		<header>
10			<div class="header-left">
11				<img src="image/isaralogo.png">
12				<p>バンコクのノマドエンジニア育成講座</p>
13			</div>	
14			<div class="header-right">
15				<a href="">お問い合わせ / 資料請求はこちら</a>
16			</div>
17				
18			</div>
19		</header>
20		<div class="clear"></div>
21		<div class="title">
22			<div class="title-top">
23				<div class="title-text">
24					<h2>プログラミングで<br>人生の安定を手にいれよう</h2>
25					<img src="image/isaralogolarge.png">
26					<h3>バンコクのノマドエンジニア育成講座<br>iSara[イサラ]</h3>
27				</div>
28			</div>
29		</div>
30		<div class="recruitment">
31			<div class="recruitment-text">
32				<h3 class="recruitment-first">まずは２０日間で、<br>月１０万円稼げるスキルを手にいれよう。</h3>
33				<h3 class="recruitment-second">※受講料金は実質０円です。詳しくは資料請求をどうぞ。</h3>
34				<a href="">お問い合わせ<span>&amp;</span>資料請求はこちら</a>
35				<h3 class="recruitment-third">第６期生：2019年11月25日<span>~</span>2019年12月14日＊締め切りました</h3>
36				<h3 class="recruitment-forth">第７期生：2020年2月17日<span>~</span>2020年3月7日＊締め切りました</h3>
37				<h3 class="recruitment-fifth">第８期生：2020年4月〜5月ごろを予定＊資料請求受付中です</h3>
38			</div>
39			<div class="buttons">
40				<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-text="iSara[イサラ]｜バンコクのノマドエンジニア育成講座" data-url="https://isara.life/" data-lang="ja" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
41				<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-width="" data-layout="button" data-action="like" data-size="small" data-share="true"></div>
42			</div>
43		</div>
44		<script type="text/javascript" src="js/jQuery-3.4.1.min.js"></script>
45		<div id="fb-root"></div>
46		<script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v6.0&appId=496232624321738&autoLogAppEvents=1"></script>
47	</body>
48</html>

scss
1@charset "utf-8";
2*{
3    margin:0;
4    padding:0;
5}
6body{
7	width:1425px;
8	font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Sans", "ヒラギノ角ゴシック", sans-serif;
9}
10header{
11	height:75px;
12	background-color:white;
13	position: fixed;
14	top:0;
15	width:100%;
16	.header-left{
17		float:left;
18		margin-left:1px;
19		img{
20		height:45px;
21		width:128px;
22		margin-top: 14px;
23		margin-left:127px;
24		
25		}
26		p{
27			display: inline-block;
28			font-size: 14px;
29			letter-spacing: 1.5px;
30			font-weight: 600;
31			color:#333333;
32			vertical-align: bottom;
33			margin-left:0.5px;
34			margin-bottom:9px;
35		}
36	}
37	.header-right{
38		float:right;
39		a{
40			display: inline-block;
41			background-color:#da6b64;
42			line-height: 22px;
43			text-decoration: none;
44			color:rgb(255, 255, 255);
45			font-size: 14px;
46			font-weight:300;
47			letter-spacing:1.5px;
48			border-radius: 25px;
49			padding:11px 40.5px;
50			margin-top: 16px;
51			margin-right:127px;
52			&:hover{
53				background-color:#d84940;
54			}
55		}
56	}
57}
58.clear{
59	clear:both;
60}
61.title-top{
62	height:500px;
63	background-image:url("https://isara.life/wp-content/themes/isara_v2/img/main.jpg");
64	background-size:cover;
65	background-position: center center;
66	margin-top:75px;
67	.title-text{
68		padding-top:88px;
69		h2{
70		color:#333333;
71		line-height: 54px;
72		font-size:28px;
73		font-weight:700;
74		letter-spacing: 1.5px;
75		text-align: center;
76		}
77		img{
78			display:block;
79			height:111px;
80			margin-top:5px;
81			margin-left: auto;
82			margin-right:auto;
83		}
84		h3{
85			text-align:center;
86			color:#333333;
87			letter-spacing: 1.5px;
88			margin-top:40px;
89			font-size:20px;
90			line-height: 22px;
91		}
92	}
93}
94.recruitment{
95	height:600px;
96	background-color:#ebb94d;
97	.recruitment-first{
98		color:#fff;
99		text-align: center;
100		letter-spacing: 1.5px;
101		line-height: 32px;
102		padding-top:30px;
103		font-size:20px;
104		font-weight:300;
105	}
106	.recruitment-second{
107		color:#c7254e;
108		width:465px;
109		height:25px;
110		background-color:#f9f2f4;
111		margin-left:auto;
112		margin-right:auto;
113		font-weight:700;
114		font-size:18px;
115		border-radius: 5px;
116		text-align:center;
117		margin-top:15px;
118		font-family:Menlo, Monaco, Consolas, "Courier New", monospace;
119		letter-spacing: 1.5px;
120	}
121	a{
122		font-size:28px;
123		letter-spacing: 1.5px;
124		font-weight:500;
125		text-decoration: none;
126		width:1030px;
127		height:105px;
128		line-height: 105px;
129		background-color: #da6b64;
130		color:rgb(255, 255, 255);
131		display: block;
132		text-align: center;
133		margin-top:47px;
134		margin-left: auto;
135		margin-right: auto;
136		border-radius: 60px;
137		span{
138			margin-left:2.5px;
139			margin-right:2.5px;
140		}
141		&:hover{
142			background-color:#d84940;
143		}
144	}
145	.recruitment-third{
146		color:rgb(255, 255, 255);
147		font-size:20px;
148		text-align: center;
149		letter-spacing: 2.4px;
150		margin-top:67px;
151		font-weight: 600;
152	}
153	span{
154		margin-left:8px;
155		margin-right:8px;
156	}
157	.recruitment-forth{
158		color:rgb(255, 255, 255);
159		font-size:20px;
160		text-align: center;
161		letter-spacing: 2.4px;
162		margin-top:35px;
163		font-weight: 600;
164	}
165	.recruitment-fifth{
166		color:rgb(255, 255, 255);
167		font-size:20px;
168		text-align: center;
169		letter-spacing: 2.4px;
170		margin-top:35px;
171		font-weight: 600;
172	}
173	.buttons{
174		margin-top:30px;
175		text-align: center;
176		.twitter-share-button{
177			display: inline-block;
178		}
179		.fb-like{
180			vertical-align: bottom;
181			margin-bottom:5.5px;
182		}
183	}
184}

H40831

2020/02/10 04:01

コードをコピペして試してみたところ、margin-leftが効きました。

reo_fukkase

2020/02/10 04:05

ありがとうございますツイートボタンだけを右にずらしたい（2つのFacebookボタンに近づけたい）のですが、それができましたか？

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

回答2件

ベストアンサー

css
1.recruitment span {
2  margin-left: 8px;
3  margin-right: 8px;
4}

この指定が効いているようです。
○期生…の所だけ効かせたいのであれば

css
1.recruitment-text span {
2  margin-left: 8px;
3  margin-right: 8px;
4}

にしてみてもいいと思います。
または他のクラスをその部分だけつけてもいいかと。

ご自身が入れたFBのボタンのタグは

html
1<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-width="" data-layout="button" data-action="like" data-size="small" data-share="true"></div>

のみかもしれませんが、実際に読み込んだページはコードが生成されて様々なタグが埋め込まれてます(Twitterも同様)。
デベロッパーツールを使ってどのタグにどんなスタイルが効いているかを見ることができれば解決の足掛かりになると思います。

投稿2020/02/10 05:01

dit.

総合スコア3235

隣にあるfacebookのボタンと同じ間隔にしたいです。

margin-leftを設定しても隣のfacebookのボタンと一緒に移動しますので、間隔は縮まりません。

tweetボタンのmargin-rightにネガティブマージンを設定するか、
facebookボタンのmargin-leftにネガティブマージンを設定してください。

css
1        .twitter-share-button{
2            display: inline-block;
3  /*        margin-right: -10px; */
4        }
5        .fb-like{
6            vertical-align: bottom;
7            margin-bottom:6.5px;
8            margin-left: -10px;
9        }
10