Bootstrap sidebar not aligning properly

Question

0.00/5 (No votes)

See more:

Hello,

I am close to finishing a webpage but I cant get the sidebar to align on the right side of the page like it is supposed to on the clone website (https://hackpacific.github.io/newsweek_clone/). I've tweaked the html/css multiple times but did not get the proper result. Also, the text under the main image has a transparent effect but the value background-image: linear-gradient(to bottom, rgba(255,255,255,0.5), #fff 50%, #fff); is not working as well. If anyone could help me understand how to solve the issue it would be greatly appreciated. Thank you

What I have tried:

**HTML:**

HTML

<!DOCTYPE html>
<html lang="en">


  <!-- Body -->
  <body>
 <div class="container-fluid main-content">
      <div class="row">
        <div class="col-xs-12" col-md-9>
            <!--Main-->
            <div class="main-article">
            <div class="col-md-9 main wrapping">
              <div class="row">
              <div class="content-background">
                <img src="images/main/main_main.jpg" class="img-responsive">
                <div class="info-wrapper">
                <div class="glass"></div>
                  <div class="info">
                    <h2 class="category-main">
                      <a href="#">U.S.</a>
                    </h2>
                    <h2 class="story text-center"><a href="#">Justice Dept. To Force Reforms</a></h2>
                    <div class="summary text-center">"The residents of Ferguson have waited   nearly a year for their city to adopt an agreement."
                    </div>
                  </div>
                </div>
              </div>
            </div>

          
        
      
    

              <div class="main-horizontal-divider"></div>
              <div class="row">
              <div class="col-xs-12 col-sm-6 sub-box vertical-divider">
                <img src="images/main/main1.png" class="img-responsive">
                <div class="sub-info">
                  <h2 class="category-main">
                    <a href="#">U.S.</a>
                  </h2>
                  <h2 class="story text-center"><a href="#">Gravitational Waves Detected, Proving Einstein Right</a></h2>
                  <div class="summary text-center">"This [was] truly a scientific moon shot, and we landed on the moon."
                  </div>
                </div>
              </div>




              <div class="col-xs-12 col-sm-6 sub-box" id="sponsor-special">
                <div id="blue-background">
                  <img src="images/main/main2.jpg" class="img-responsive">
                  <div class="sub-info">
                    <h2 class="category-main blue">
                      <a id="asia" href="#">SPONSOR INSIGHT</a>
                    </h2>
                    <h2 class="story text-center"><a href="#">The Best Universities of Asia</a>
                    </h2>
                    <div class="summary text-center">"Universities from Asia and Europe are challenging the best schools in the USA. When it comes to choosing the right school then, the options have never been more diverse…"
                    </div>
                  </div>
                </div>
              </div>
            



            <!--Side Menu-->
            <div class="sidebar col-xs-12 col-md-3">
              <div class="nav nav-sidebar">
                <div class="grey-background">
                  <div class="bullet-list">
                    <div class="headlines-title">
                      Latest headlines
                    </div>
                    <ul id="sidebar-list">
                      <li class="bullet"><a class="bullet-a" href="#">Harriet Harman: The New Law on Gender Pay was Labour's</a></li>
                      <li class="bullet"><a class="bullet-a" href="#">French Court Will Hear Facebook Nude Painting Case</a></li>
                      <li class="bullet"><a class="bullet-a" href="#">Rolf Harris Faces Seven Indecent Assault Charges</a></li>
                      <li class="bullet"><a class="bullet-a" href="#">U.K. Airbnb Host Rejects Israeli for 'Occupying Lands'</a></li>
                      <li class="bullet"><a class="bullet-a" href="#">Watch: Real Madrid's Pepe Gets Into Valentine's Spirit</a></li>
                      <li class="bullet"><a class="bullet-a" href="#">Indonesia Blocking Gay Emojis From Facebook, Whatsapp</a></li>
                      <li class="bullet"><a class="bullet-a" href="#">Mourinho and Woodward ‘Cannot Have Spoken’ - Van Gaal</a></li>
                      <li class="bullet"><a class="bullet-a" href="#">Rwanda to Relocate Burundian Refugees</a></li>
                      <li class="bullet">
                        <div class="see-all">
                          <button class="see-all-headlines" type="button" class="btn btn-default">See All Headlines</button>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
                

              
    

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

**MAIN.CSS:**

CSS

body {
	color: black;
	background-color: white;
	margin: 0px;
}

.main {
    padding-left: 0px;
    padding-right: 0px;
    top: -20px;
    margin-left: -15px;
    margin-right: -15px;
}

media only screen and (max-width: 767px)
.wrapping {
    padding-left: 0;
    padding-right: 0;
}

.content-background {
	position: relative;
	background-image: linear-gradient(to bottom,rgba(255,255,255,0.5) 0,#fff 50%,#fff 100%);
}

.img-responsive {
    width: 100%;
}

.info-wrapper {
    position: relative;
}

@media only screen and (min-width: 768px)
.glass {
    background-image: linear-gradient(to bottom,rgba(255,255,255,0.5) 0,#fff 50%,#fff 100%);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 155px;
}

.info {
	border-top: 4px solid #ff0500
	padding: 15px 30px 25px;
	position: relative;
	bottom: 0; left: 0; right: 0;
}

@media only screen and (min-width: 768px)
.info {
    margin-top: -150px;
}

.category-main {
	color: rgb(255,55,51);
	text-transform: uppercase;
	text-align: center;
}

@media only screen and (min-width: 992px)
.category-main {
    font-size: 22px;
}

a {
    color: inherit;
}

.story {
    text-transform: uppercase;
    color: black;
}

.main-horizontal-divider {
    width: 100%;
    border-bottom: 1px solid #f2f2f2;
}

.sub-box {
    margin-top: 15px;
    border-bottom: 1px solid #f2f2f2;
}

@media only screen and (min-width: 768px)
.sub-box {
    height: 550px;
}

@media only screen and (min-width: 992px)
.sub-box {
    height: 670px;
}

@media only screen and (min-width: 1200px)
.sub-box {
    height: 690px;
}

.vertical-divider {
    border-right: 1px solid #f2f2f2;
}

.main-content {
    overflow-y: visible;
    position: relative;
    height: 100px;
}

.main-article {
  margin-left: -15px;
  margin-right: -15px;
}

#blue-background {
    border: 1px solid #cdf0ff;
    background-color: #e6ffff;
}

@media only screen and (min-width: 768px)
#blue-background {
    height: 535px;
}

@media only screen and (min-width: 992px)
#blue-background {
    height: 555px;
}

@media only screen and (min-width: 1200px)
#blue-background {
    height: 675px;
}

.category-main.blue {
    color: #00B7FF;
}

#asia {
    color: green;
}

.navbar {
  margin-bottom: 0;
}

**SIDEBAR.CSS:**

CSS

.bullet-list {
    padding: 30px 0px;
}

.headlines-title {
    letter-spacing: 0.25px;
    color: #FF0500;
    text-transform: uppercase;
    margin-bottom: 10px;
    position: relative;
}

@media only screen and (max-width: 992px)
.headlines-title {
    text-align: center;
    font-size: 21px;
}

#sidebar-list {
    margin-bottom: 40px;
}

.bullet {
    position: relative;
    padding: 15px 15px 15px 15px;
    top: 15px;
    left: -25px;
    color: #FF0500;
    list-style-position: inside;
    list-style-type: square;
}

@media only screen and (max-width: 992px)
.bullet {
    text-align: center;
}

.bullet-list li:first-child {
    border-top: 0;
}

.bullet a {
    font-weight: bold;
    font-size: 18px;
    color: #181818;
}

.bullet-list li {
    border-top: 1px solid #e5e5e5;
}

.bullet-list li:last-child {
    list-style-type: none;
    border-top: 0;
}

.see-all {
    display: block;
    text-align: center;
}

.see-all-headlines {
    background-color: #e5e5e5;
    color: #757575;
    font-size: 16px;
    line-height: 50px;
    display: block;
    text-align: center;
    width: 100%;
}

.bullet-list {
    padding: 30px 0px;
}

Posted 13-Feb-20 13:32pm

fischerns

Updated 14-Feb-20 2:13am

Richard Deeming

v2

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)