moving a gif image right - html

Question

Ive been using simple html and css to make my new webpage. its just a gradient background with a gif in front of it. the gif has been giving me a lot of grief lately because it keeps moving out of to the right and extending the scree. i just want the gif to be centered perfectedly and at a good size right not the desktop version looks ideal but the mobile version looks so small as seen below I would just like the gif to be wider and feel the screen more without extending it.
my HTML goes as following
a,
a:focus,
a:hover {
color: #fff;
}
/* Custom default button */
.btn-default,
.btn-default:hover,
.btn-default:focus {
color: #333;
text-shadow: none;
/* Prevent inheritence from `body` */
background-color: #fff;
border: 1px solid #fff;
}
/*
* Base structure
*/
html,
body {
height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
}
body {
color: #fff;
text-align: center;
text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
background: radial-gradient( circle closest-side, #d5c83d 80%, #e9e5bf, #8482e3);
}
/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
display: table;
width: 100%;
/*height: 100%; */
min-height: 100%;
}
.site-wrapper-inner {
display: table-cell;
vertical-align: top;
}
.cover-container {
margin-right: auto;
margin-left: auto;
}
/* Padding for spacing */
.inner {
padding: 20px;
}
/*
* Header
*/
.masthead-brand {
margin-top: 10px;
margin-bottom: 10px;
}
.masthead-nav>li {
display: inline-block;
}
.masthead-nav>li+li {
margin-left: 20px;
}
.masthead-nav>li>a {
padding-right: 0;
padding-left: 0;
font-size: 30px;
font-weight: bold;
color: #fff;
/* IE8 proofing */
color: rgba(255, 255, 255, .75);
border-bottom: 2px solid transparent;
}
.masthead-nav>li>a:hover,
.masthead-nav>li>a:focus {
background-color: transparent;
border-bottom-color: #a9a9a9;
border-bottom-color: rgba(255, 255, 255, .25);
}
.masthead-nav>.active>a,
.masthead-nav>.active>a:hover,
.masthead-nav>.active>a:focus {
color: #fff;
border-bottom-color: #fff;
}
#media (min-width: 768px) {
.masthead-brand {
float: left;
}
.masthead-nav {
float: right;
}
.jumbotron {
padding-top: calc(var(--jumbotron-padding-y) * 2);
padding-bottom: calc(var(--jumbotron-padding-y) * 2);
}
}
/*
* Cover
*/
.cover {
padding: 0 20px;
}
.cover .btn-lg {
padding: 10px 20px;
font-weight: bold;
}
/*
* Affix and center
*/
#media screen and (max-width: 992px) {}
#media (min-width: 768px) {
/* Pull out the header and footer */
.masthead {
position: fixed;
top: 0;
}
/* Start the vertical centering */
.site-wrapper-inner {
vertical-align: middle;
}
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="container">
<div class="masthead clearfix">
<div class="container inner">
<h3 class="masthead-brand"></h3>
<nav>
<ul class="nav masthead-nav">
<li class="active">Home*</li>
<li>Magazine#</li>
<li>Abouti</li>
</ul>
</nav>
</div>
</div>
<div class="innercover">
<img class="img" src="https://static.tumblr.com/y8b11bc/u05qfybi7/ezgif.com-resize.gif" ; style=" top: 0%; width: 100%; max-height: 100%; " ;></img>
</div>

Answer 1

Adjust your css code to change the size of the GIF depending if it's mobile or desktop. Also, adjust the div that holds the GIF to center the items.
#media (min-width: 768px) {
.img{
width: X%
}
.innercover{
display: flex;
justify-content: center;
align-items: center;
}