CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
akenixx
akenixx

Reputation: 31

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>

Upvotes: 3

Views: 63

Answers (3)

Syed Arif Iqbal
Syed Arif Iqbal

Reputation: 1427

.container {
    background-color: rgba(98, 97, 99, 0.25);
    padding-top: 4%;
    width: 960px;
    margin: 0 auto;
}

Upvotes: 0

kapil
kapil

Reputation: 351

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>

Upvotes: 0

Icewine
Icewine

Reputation: 1851

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;

}

Upvotes: 0

Related Questions