bootstrap cols not lining up in the center of the div - html

My problem is simple, my Bootstrap cols are not lining up in the middle of the div.
Have a look at my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width = device-width, initial-scale = 1">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css"></style>
</head>
<body>
<div id="boxes">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div id="box1">
Hello
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div id="box2">
World
</div>
</div>
</div>
</body>
</html>
#boxes {
margin: 0 auto;
width: 100%;
max-width: 1000px;
height: 600px;
background-color: rgba(79, 27, 184, 0.29);
}
#box1 {
width: 400px;
height: 260px;
border-radius: 10px;
background-color: rgba(37, 100, 165, 0.80);
border: 1px solid rgba(37, 100, 165, 0.80);
margin-top: 50px;
text-align: center;
}
#box2 {
width: 400px;
height: 260px;
border-radius: 10px;
background-color: rgba(37, 100, 165, 0.80);
border: 1px solid rgba(37, 100, 165, 0.80);
margin-top: 50px;
text-align: center;
}
I've put col-lg on 6, which should be 50% of the div per box. But the boxes are clearly not in the center of their cols. Any help with this would be appreciated. Thanks.

If you change your margin in your box2 like this, is it what you're looking for ?
#box2 {
margin: 50px auto 0 auto;
}

if your are working with bootstrap 4 wrap your code with .row fiddle
#boxes {
margin: 0 auto;
width: 100%;
max-width: 1000px;
height: 600px;
background-color: rgba(79, 27, 184, 0.29);
}
#box1 {
width: 400px;
height: 260px;
border-radius: 10px;
background-color: rgba(37, 100, 165, 0.80);
border: 1px solid rgba(37, 100, 165, 0.80);
margin-top: 50px;
text-align: center;
}
#box2 {
width: 400px;
height: 260px;
border-radius: 10px;
background-color: rgba(37, 100, 165, 0.80);
border: 1px solid rgba(37, 100, 165, 0.80);
margin-top: 50px;
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div id="boxes" class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div id="box1">
Hello
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div id="box2">
World
</div>
</div>
</div>
</body>

Related

How to focus z-index: 2 element and not z-index: 1

I'm trying to draw a piano with CSS and JavaScript. Here is my code :
.container {
border: 3px solid black;
background-color: black;
border-radius: 10px;
margin: 60px auto;
width: 100% !important;
}
.mix {
height: 60px;
background-color: rgb(29, 29, 29);
}
.tile {
z-index: 1;
border: 1px solid black;
background-color: white;
width: 45px;
height: 240px;
}
.tile:active {
background-color: rgba(255, 255, 255, 0.8);
}
.black-key {
z-index: 2;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
width: 25px;
height: 160px;
background-color: black;
transform: translateX(-50%);
}
.black-key:active {
background-color: rgb(39, 39, 39);
}
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./index.js"></script>
<link rel="stylesheet" href="./index.css">
<script src="https://cdn.tailwindcss.com"></script>
<title>Piano App</title>
</head>
<body>
<div class="container">
<div class="mix"></div>
<div class="flex justify-center">
<div class="tile"></div>
<div class="tile">
<div class="black-key"></div>
</div>
<div class="tile"></div>
<div class="tile">
<div class="black-key"></div>
</div>
<div class="tile">
<div class="black-key"></div>
</div>
<div class="tile"></div>
<div class="tile">
<div class="black-key"></div>
</div>
<div class="tile">
<div class="black-key"></div>
</div>
<div class="tile"></div>
<div class="tile">
<div class="black-key"></div>
</div>
</div>
</div>
</body>
</html>
My question is :
When I click on a black key, I want it to change color (see CSS), but the problem is it focuses the with key too. So, the white key change color too.
I want only the black key to change color when I click on it.
Any idea where is my mistake ?
If it's too much work to separate .black-key from .tile (IDK never used Tailwind), you can change the .black-keys into <a> so they actually are focusable and then use :focus-within on .tiles. :focus-within is the only CSS property to affect a parent tag via it's child. Basically, if a child of a tag with :focus-within triggers a "focus" event then it's styles can change. Unfortunately, the only tags that all browsers consider focusable are <input>, <textarea>, <select>, and <a>.
This may look semantically off but it's a piano not a form, or article (I'm talking to the semantics cops out there).
HTML
Change:
<div class='black-key'></div>
To:
<a href='#' class='black-key'></a>
CSS
Add:
.tile:focus-within {
background-color: rgba(255, 255, 255, 1);
}
.black-key {
display: block;
/*...*/
When .black-key gains focus, .tile will just keep it's opacity/alpha (in retrospect opacity: 1 should work as well).
JS
Add to index.js or a <script> tag located before the closing </body> tag (the bottom of <body> not under <body>):
document.querySelectorAll('.black-key').forEach(a => a.onclick = e => e.preventDefault());
That keeps any .black-keys from jumping when clicked -- it shouldn't affect anything else. Here's some corrections to CSS:
Removed z-index since it will only work for non-static tags:
position:
relative;,
absolute;,
fixed;, or
sticky;
Removed !important. Unless you know exactly what you are doing not only in the present but also in the future always avoid using !important. Changed width: 100% !important to min-width: 100%.
document.querySelectorAll('.black-key').forEach(a => a.onclick = e => e.preventDefault());
.container {
border: 3px solid black;
background-color: black;
border-radius: 10px;
margin: 60px auto;
min-width: 100%;
}
.mix {
height: 60px;
background-color: rgb(29, 29, 29);
}
.tile {
border: 1px solid black;
background-color: white;
width: 45px;
height: 240px;
}
.tile:active {
background-color: rgba(255, 255, 255, 0.8);
}
.tile:focus-within {
background-color: rgba(255, 255, 255, 1);
}
.black-key {
display: block;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
width: 25px;
height: 160px;
background-color: black;
transform: translateX(-50%);
}
.black-key:active {
background-color: rgb(39, 39, 39);
}
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./index.css">
<title>Piano App</title>
</head>
<body>
<div class="container">
<div class="mix"></div>
<div class="flex justify-center">
<div class="tile"></div>
<div class="tile">
</div>
<div class="tile"></div>
<div class="tile">
</div>
<div class="tile">
</div>
<div class="tile"></div>
<div class="tile">
</div>
<div class="tile">
</div>
<div class="tile"></div>
<div class="tile">
</div>
</div>
</div>
<script src="https://cdn.tailwindcss.com"></script>
<script src="./index.js"></script>
</body>
</html>

Background-color isn't responsive

I'm a newbie at this. I have a problem. I'm creating a personal page where I want a background-color in the top part of the page (covering a section) and I want another background-color in the middle of the page (covering another section).
The thing is that I did that but when I go to developer tools the design it doesn't responsive. My body background kinda "creates" a margin aside my second background.
I don't know if I'm explain it well but here is my code and the bug that I have:
* {
font-family: 'Fredoka', sans-serif;
margin: 0%;
padding: 0%;
}
body {
background-color: #3a5056;
color: white;
text-align: center;
}
html,
body {
height: 100%;
}
.middle {
background-color: white;
height: 1866px;
padding: 50px;
margin-top: 230px;
}
.cards-list {
z-index: 0;
width: 100%;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.card {
margin: 30px auto;
width: 300px;
height: 300px;
border-radius: 40px;
box-shadow: 5px 5px 30px 7px rgba(0, 0, 0, 0.25), -5px -5px 30px 7px rgba(0, 0, 0, 0.22);
cursor: pointer;
transition: 0.4s;
}
.card .card_image {
width: inherit;
height: inherit;
border-radius: 40px;
}
.card .card_image img {
width: inherit;
height: inherit;
border-radius: 40px;
object-fit: cover;
}
.card .card_title {
text-align: center;
border-radius: 0px 0px 40px 40px;
font-family: sans-serif;
font-weight: bold;
font-size: 30px;
margin-top: -80px;
height: 40px;
color: #2c3d42;
}
section .intro {
height: 40px;
width: 850px;
padding: 6%;
}
.intro {
display: flex;
justify-content: center;
align-items: center;
align-self: center;
min-width: 850px;
}
.intro:nth-child() {
align-self: center;
}
.abt-me {
position: relative;
width: 800px;
height: 250px;
padding: 1%;
color: #2c3d42;
display: block;
content: "";
margin-top: -2550px;
border: 1px hidden;
font-size: 18px;
border-radius: 40px;
box-shadow: 5px 5px 30px 7px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 2px 3px 17px 6px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 2px 3px 17px 6px rgba(0, 0, 0, 0.3);
}
.text-box {
padding: 1%;
margin-top: -8px;
font-size: 21px;
width: 750px;
height: 250px;
margin-left: 2%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght#300;400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<title></title>
</head>
<body>
<section class="main">
<div id="name">
<h1>Hello, I'm <span id="me">Sapph</span></h1>
</div>
<div id="scroll">
<section id="section02" class="demo">
<span></span>
</section>
</div>
<nav class="social">
<ul>
<li>Twitter <i class="fa fa-twitter"></i></li>
<li>Github <i class="fa fa-github"></i></li>
<li>Linkedin <i class="fa fa-linkedin"></i></li>
</ul>
</nav>
</section>
<section class="middle">
<div id="cards">
<div class="cards-list">
<div class="card 1">
<div class="card_image"></div>
<div class="card_title title-white">
<p>Contact</p>
</div>
</div>
<div class="card 3">
<div class="card_image">
</div>
<div class="card_title">
<p>Projects</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="intro">
<div class="abt-me">
<h2 style="margin-bottom: 12px" ;><b>
About Me</b>
</h2>
<div class="text-box">
<p>
<center>Hello, I'm...</center>
</p>
</div>
</div>
</section>
<footer>&copy Copyright</footer>
</body>
</html>
This is my problem: https://prnt.sc/w4Zkw0QU7P67
This is what I need: https://prnt.sc/UhNmn4djohPS
I took the photos in the developer tools. Thanks
Try to find the #media section for max-width:890px in your style.css and edit the "section" tag style. or past the below code on your page, this should help. It is the amount of padding added on the section for screen width less than 890px.
#media only screen and (max-width: 890px) {
section{
margin: 0px;
padding: 10px;
}
}
If you want to change the section style for all screen widths just use:
#media only screen and (min-width: 360px) and (max-width: 1360px) {
section{
margin: 0px;
padding: 10px;
}
}

How Can I Use Weather Icons on My Weather Application

I'm using http://erikflowers.github.io/weather-icons/ to display weather icons on my page. However, after inserting the cdn. It doesn't work.
https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons-wind.min.css the icon has a class of "wi-wom-200" taken from http://erikflowers.github.io/weather-icons/api-list.html since I'm using openweathermap.com for my api. Any help on how to display this icon. Openweahtermap provides their own icons, but very low resolution. Thanks
/*
stylesheet for weather app
*/
body {
background-image: url("../img/city_vector.jpg");
min-height: 100vh;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
margin: 0 auto;
}
/* background color on top of bg image*/
.hero {
position: absolute;
min-height: 100vh;
min-width: 100vw;
top: 0;
bottom: 0;
background-color: rgba(31, 34, 118, 0.5);
z-index: -5;
}
/* navbar */
.navbar {
background-color: rgb(69, 106, 171);
}
.navbar a {
color: white;
font-size: 25px;
}
/* weather section */
.weather {
border: 1px solid white;
height: 30rem;
margin-top: 10rem;
/*background-color: rgba(160, 167, 187, 0.5);*/
background-color: rgba(0, 0, 0, 0.5);
/*background-color: rgba(213, 193, 193, 0.5);*/
border-radius: 20px;
color: white;
}
.weather-head {
height: 50%;
}
#weather-icon {
height: 7rem;
width: 7rem;
}
.weather-body {
height: 50%;
border-top: 1px solid white;
padding-top: 0.5rem;
}
#description {
/*border: 1px solid white;*/
font-size: 2rem;
/*margin-top: 2rem;*/
}
#temperature {
/*border: 1px solid white;*/
font-size: 7rem;
}
span {
font-size: 3rem;
}
<!DOCTYPE html>
<html>
<head>
<title>Weather App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons-wind.min.css">
<link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
<div class="hero">
<!-- navbar -->
<nav class="navbar">
<a class="navbar-brand" href="#">
<!-- <img src="/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt=""> -->
<i class="fa fa-sun-o" aria-hidden="true"></i>
<strong>Local</strong>Weather
</a>
</nav>
<!-- weather section -->
<div class="container">
<div class="row">
<div id="" class="col-8 mx-auto weather">
<div class="weather-head">
<h2 id="location" class="text-center"></h2>
<div class="row">
<div id="description" class="description col-6 text-center">
<i class="wi wi-wom-200"></i> Thunderstorm
</div>
<div id="temperature" class="col-6 text-center">
</div>
</div>
<div class="weather-body">
<div class="row">
<div class="humidity col-4">
<div class="lead text-center">Humidity</div>
</div>
<div class="wind col-4">
<div class="lead text-center">Wind Speed</div>
</div>
<div class="wind-degree col-4">
<div class="lead text-center">Wind Direction</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You have not included the icons cdn link. Use this
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.min.css">
And then use wi-owm-200 class for the icon
body {
background-image: url("../img/city_vector.jpg");
min-height: 100vh;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
margin: 0 auto;
}
.hero {
position: absolute;
min-height: 100vh;
min-width: 100vw;
top: 0;
bottom: 0;
background-color: rgba(31, 34, 118, 0.5);
z-index: -5;
}
.navbar {
background-color: rgb(69, 106, 171);
}
.navbar a {
color: white;
font-size: 25px;
}
.weather {
border: 1px solid white;
height: 30rem;
margin-top: 10rem;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 20px;
color: white;
}
.weather-head {
height: 50%;
}
#weather-icon {
height: 7rem;
width: 7rem;
}
.weather-body {
height: 50%;
border-top: 1px solid white;
padding-top: 0.5rem;
}
#description {
font-size: 2rem;
}
#temperature {
font-size: 7rem;
}
span {
font-size: 3rem;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons-wind.min.css">
<div class="hero">
<nav class="navbar">
<a class="navbar-brand" href="#">
<i class="fa fa-sun-o" aria-hidden="true"></i>
<strong>Local</strong>Weather
</a>
</nav>
<div class="container">
<div class="row">
<div id="" class="col-8 mx-auto weather">
<div class="weather-head">
<h2 id="location" class="text-center"></h2>
<div class="row">
<div id="description" class="description col-6 text-center">
<i class="wi wi-owm-200"></i> Thunderstorm
</div>
<div id="temperature" class="col-6 text-center">
</div>
</div>
<div class="weather-body">
<div class="row">
<div class="humidity col-4">
<div class="lead text-center">Humidity</div>
</div>
<div class="wind col-4">
<div class="lead text-center">Wind Speed</div>
</div>
<div class="wind-degree col-4">
<div class="lead text-center">Wind Direction</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

How can I properly use bootstrap on my site?

I just started using bootstrap, and I am creating a website using it. But I have been told that I am not using it correctly. Can someone show me how I would properly use bootstrap? Thanks for any help.
body{
overflow: hidden;
background-color: #1C213D;
background-image: url("background.png");
}
.nav{
position: absolute;
width: 250px;
height: 5000px;
background-color: rgba(0, 0, 0, .2);
border: 2px solid rgba(56, 179, 206, .4);
}
.nav-pills li a{
/* 0.5s is the amount of time it take to change colors */
transition: .3s background ease-in-out;
}
ul li{
position: relative;
text-align: center;
list-style: none;
font-family: "Play";
display: block;
color: lightsteelblue;
margin-top: 200px;
font-size: 20px;
padding: 10px;
}
p{
padding-top: 10px;
padding-bottom: 10px;
text-align: left;
font-size: 18px;
color: whitesmoke;
}
.container{
position: absolute;
width: 800px;
height: 450px;
margin-top: 200px;
margin-left: 265px;
background-color: rgba(0, 0, 0, .8);
border-top: 2px solid rgba(56, 179, 206, 1);
border-bottom: 2px solid rgba(56, 179, 206, 1);
border-right: 2px solid rgba(56, 179, 206, 1);
}
.project1{
position: absolute;
width: 400px;
height: 275px;
margin-top: 80px;
margin-left: 800px;
border: 2px solid rgba(56, 179, 206, 1);
background-color: rgba(0, 0, 0, .2);
}
.project2{
position: absolute;
width: 400px;
height: 275px;
margin-top: 80px;
margin-left: 350px;
border: 2px solid rgba(56, 179, 206, 1);
background-color: rgba(0, 0, 0, .2);
}
.project3{
position: absolute;
width: 400px;
height: 275px;
margin-top: 400px;
margin-left: 350px;
border: 2px solid rgba(56, 179, 206, 1);
background-color: rgba(0, 0, 0, .2);
}
.project4{
position: absolute;
width: 400px;
height: 275px;
margin-top: 400px;
margin-left: 800px;
border: 2px solid rgba(56, 179, 206, 1);
background-color: rgba(0, 0, 0, .2);
}
img{
position: absolute;
margin-left: 54px;
margin-top: 25px;
}
i{
margin-top: 675px;
font-size: 40px;
color: white;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Play" rel="stylesheet">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Home</title>
</head>
<body>
<div class="container-fluid">
<div class="col-md-4 col-lg-4 col-sm-4 col-xs-4">
<ul class="nav nav-pills nav-stacked" role="tablist">
<img src="logo.png">
<li class="active">Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
<div class="container">
<div class="col-md-7 col-lg-7 col-xs-7 col-sm-7">
<p>This is the home page.</p>
</div>
</div>
</div>
</body>
</html>
Firstly, you do not need to use these two lines the way you did:
<div class="col-md-4 col-lg-4 col-sm-4 col-xs-4">
<div class="col-md-7 col-lg-7 col-xs-7 col-sm-7">
These lines are better written like so:
<div class="col-xs-4">
<div class="col-xs-7">
But even this is technically a potential problem because on xtra small screens you want to generally (not always) have the items extend all the way across the screen.
So a better thing to do is to write the media query classes starting at the small or medium screen size and let every screen size underneath use the default 100% width. That would look like so:
<div class="col-md-4">
<div class="col-md-7">
Furthermore, this is not necessarily incorrect but you forgot to add the Bootstrap Javascript to the document. NOTE: You will also need to include jQuery BEFORE the Bootstrap Javascript so that it works. Bootstrap JS is dependent on jQuery.
Lastly, in your css you are styling generic elements. What you want to do is copy and paste the component CSS with all of the default bootstrap classes and then add another custom class to the items you want to edit to look different.
So, this line:
<ul class="nav nav-pills nav-stacked" role="tablist">
Should look like this:
<ul class="nav nav-pills nav-stacked my-awesome-custom-element" role="tablist">
And then you can write CSS for my-awesome-custom-element that will ONLY target your custom element without messing with underlying Bootstrap CSS styles.
You are not including the bootstrap js (or the required jQuery) files. See this link:
http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-get-started.php
Also, this is redundant:
class="col-md-4 col-lg-4 col-sm-4 col-xs-4"
class="col-md-7 col-lg-7 col-xs-7 col-sm-7"
They can be consolidated into:
class="col-md-4"
class="col-md-7"
If you are using different widths for different screen sizes, then this would be appropriate:
class="col-md-3 col-lg-4 col-sm-5 col-xs-8"
class="col-md-4 col-lg-7 col-xs-6 col-sm-5"
Finally, if you are using the bootstrap grid system, then usually you want to make your column width add up to 12:
<div class="col-md-4"></div><div class="col-md-5"></div><div class="col-md-3"></div>
I would recommend reading up on the bootstrap grid system: http://getbootstrap.com/css/
add this in the header
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

Why can't I move the background?

I'm trying to make a simple front page but suddenly I can't move my background anymore. Tried it with padding but I can't solve it. Maybe it is because I just started with codes, haha! So what I wanna do is as follows: I want to move my container> background-color: rgba(98, 97, 99, 0.25); more to the center so that it's even on both sides. For some reason the code doesn't show up correctly in here but for me it is. Maybe because I'm using Bootstrap.
body html {
margin: 0;
padding: 0;
}
.container {
background-color: rgba(98, 97, 99, 0.25);
padding-top: 4%;
}
.wrap{
width: 1090px;
}
video {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
z-index: -100;
}
.wowImg {
height: 255px;
width: 255px;
border-top: solid black 9px;
border-bottom: solid black 9px;
border-left: solid black 9px;
float: left;
}
.venom {
height: 255px;
width: 255px;
border-bottom: solid black 9px;
border-left: solid black 9px;
float: left;
}
.overwatch {
height: 255px;
width: 255px;
border-top: solid black 9px;
border-bottom: solid black 9px;
border-right: solid black 9px;
border-left: solid black 9px;
float: left;
}
.sum41 {
height: 255px;
width: 255px;
border-bottom: solid black 9px;
border-right: solid black 9px;
border-left: solid black 9px;
float: left;
}
.middle {
height: 510px;
width: 550px;
border-top: solid black 9px;
border-bottom: solid black 9px;
border-left: solid black 9px;
float: left;
}
.whileSheSleeps {
height: auto;
width: 540px;
border-bottom: solid black 9px;
border-left: solid black 9px;
border-right: solid black 9px;
float: left;
}
.monster {
height: 284px;
width: 250px;
border-bottom: solid black 9px;
border-left: solid black 9px;
border-right: solid black 9px;
float: left;
}
.css_awesome {
height: 284px;
width: 285px;
border-bottom: solid black 9px;
border-left: solid black 9px;
border-right: solid black 9px;
float: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>homepage</title>
<link href="index.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row col-md-12 wrap">
<div class="row">
<div class="col-md-12">
<div class="wrap">
<div class="row col-md-3 upperLeft">
<div class="row">
<div class="col-md-12">
<img class="wowImg"img">
<img class="venom" src="img">
</div>
</div>
</div>
<div class="col-md-6 Middle">
<div class="row">
<div class="col-md-12">
<img class="middle" src "img">
</div>
</div>
</div>
<div class="row col-md-3 upperRight">
<div class="row">
<div class="col-md-12">
<img class="overwatch" src="img">
<img class="sum41" src="img">
</div>
</div>
</div>
<div class="row col-md-6 bottomLeft">
<div class="row">
<div class="col-md-12">
<img class="whileSheSleeps" src="img">
</div>
</div>
</div>
<div class="row col-md-3 bottomMid">
<div class="row">
<div class="col-md-12">
<img class="monster" src="img">
</div>
</div>
</div>
<div class="row col-md-3 bottomRight">
<div class="row">
<div class="col-md-12">
<img class="css_awesome" src="img">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
.container {
background-color: rgba(98, 97, 99, 0.25);
padding-top: 4%;
width: 960px;
margin: 0 auto;
}
Set the container width and then left and right margin: auto;
.container {
background-color: rgba(98, 97, 99, 0.25);
padding-top: 4%;
width: 900px;
margin-left: auto;
margin-right: auto;
}
Add container float:left in css or you can add clear both
body html {
margin: 0;
padding: 0;
}
.container {
background-color: rgba(98, 97, 99, 0.25);
padding-top: 4%;
float:left;
}
.wrap{
width: 1090px;
}
video {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
z-index: -100;
}
.wowImg {
height: 255px;
width: 255px;
border-top: solid black 9px;
border-bottom: solid black 9px;
border-left: solid black 9px;
float: left;
}
.venom {
height: 255px;
width: 255px;
border-bottom: solid black 9px;
border-left: solid black 9px;
float: left;
}
.overwatch {
height: 255px;
width: 255px;
border-top: solid black 9px;
border-bottom: solid black 9px;
border-right: solid black 9px;
border-left: solid black 9px;
float: left;
}
.sum41 {
height: 255px;
width: 255px;
border-bottom: solid black 9px;
border-right: solid black 9px;
border-left: solid black 9px;
float: left;
}
.middle {
height: 510px;
width: 550px;
border-top: solid black 9px;
border-bottom: solid black 9px;
border-left: solid black 9px;
float: left;
}
.whileSheSleeps {
height: auto;
width: 540px;
border-bottom: solid black 9px;
border-left: solid black 9px;
border-right: solid black 9px;
float: left;
}
.monster {
height: 284px;
width: 250px;
border-bottom: solid black 9px;
border-left: solid black 9px;
border-right: solid black 9px;
float: left;
}
.css_awesome {
height: 284px;
width: 285px;
border-bottom: solid black 9px;
border-left: solid black 9px;
border-right: solid black 9px;
float: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>homepage</title>
<link href="index.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row col-md-12 wrap">
<div class="row">
<div class="col-md-12">
<div class="wrap">
<div class="row col-md-3 upperLeft">
<div class="row">
<div class="col-md-12">
<img class="wowImg"img">
<img class="venom" src="img">
</div>
</div>
</div>
<div class="col-md-6 Middle">
<div class="row">
<div class="col-md-12">
<img class="middle" src "img">
</div>
</div>
</div>
<div class="row col-md-3 upperRight">
<div class="row">
<div class="col-md-12">
<img class="overwatch" src="img">
<img class="sum41" src="img">
</div>
</div>
</div>
<div class="row col-md-6 bottomLeft">
<div class="row">
<div class="col-md-12">
<img class="whileSheSleeps" src="img">
</div>
</div>
</div>
<div class="row col-md-3 bottomMid">
<div class="row">
<div class="col-md-12">
<img class="monster" src="img">
</div>
</div>
</div>
<div class="row col-md-3 bottomRight">
<div class="row">
<div class="col-md-12">
<img class="css_awesome" src="img">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>