画像の張替え

現在サイトの画像の差し替えの練習をしているのですが、どうもうまくいかないことがあるため、ここで質問させていただきます。

下記の写真を見て分かる通り、正常の画像のロゴは、白い背景の真ん中に位置していますが、
異常の画像のロゴは、左側にずれております。

どうにかして、この異常の画像のロゴを白い背景の真ん中に配置したいのですが、いまだ解決策が見当たりません。

大変恐縮ですが、どなたかわかる方ご教授願えないでしょうか？

よろしくお願いします。

これまで改善に向けて、取り組んだこと

まず私は、画像の差し替えをする為、webから画像(brand-1.gif)をとってきて、既存の画像(B.jpeg)と入れ替えました。

A.gifは、photoshopsで拡張子を.pngに変えたりしました。(しかし、jpegに変更することができなかった)。

そのあと、
<img style ="margin:0 auto;"></img>
<img src="img/brand/brand-1.png" alt="ラブレ" />

と入力したり、"margin:0 auto;"の部分を"text-align:center;"や"align:middle;"にしたり、試行錯誤したが、ロゴを真ん中に移動させるどころか、消えてしまったりして、うまくいかなかった。

ここに、私の編集中のWebsiteのURLと co-712.it.3919.com

練習に利用したWebsite http://www.kikkoman.co.jp/

を記載させていただきます。

<div class="item--divide" data-bg-color=""><div class="style-color1 js-box-link js-all-link">


						<div class="elem-pic-block" data-margin-top="" data-margin-bottom="" data-direction="vertical"><div><div><div><div>
							<div class="pic-container"><div>
								<div class="elem-pic" data-align="" data-margin-bottom="" data-margin-top=""><div><div><div><div>
									<div class="holder"><div>
										<a shape="rect" href="https://www.kikkoman.co.jp/kikkoman/index.html">
											<img src="img/brand/brand-1.png" alt="ラブレ" />
										</a>
									</div></div>
								<!-- /elem-pic --></div></div></div></div></div>
							<!-- /pic-container --></div></div>
							<div class="txt-container"><div>
								<div class="txt-head">
									<div class="elem-heading-lv3" data-margin-top="" data-margin-bottom=""><div><div><div><div>
										<div class="heading-container">
											<div class="title-holder">
												<h3>

														<span>ラブレ</span>

												</h3>
											<!-- /title-holder --></div>
										<!-- /heading-container --></div>
									<!-- /elem-heading-lv3 --></div></div></div></div></div>

								<!-- /txt-head --></div>

							<!-- /txt-box --></div></div>
					<!-- /elem-pic-block --></div></div></div></div></div>
コード