samedi 13 juillet 2019

How can I make my nav bar span the width of the entire div

screenshot ^ check the image above. I'd really appreciate some help! I want to make my nav bar span across the entire width of my div. Right now there's a space on the right, and I can't seem to make it center itself or get wider.

I tried structuring the outer div like a table so I could get my two elements underneath (the twitter feed and the general text) side by side, but is there a better way?

.top-content-box {
    width: 90%;
    height:30%;
    margin:30px auto;
    background: #fff;
    box-shadow: 0px 0px 10px #000;  
    display:table;
}

.top-container{

   text-align:center;

}

.nav-bar{
  display:table-header-group;
  text-align:center;
}

ul.link-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  width:100%;
}

my html

 <div class = "top-container">

      <div class="top-content-box">

             <div class="nav-bar">
      <ul class="link-list">
                <li class="link-list"><a class="nav-list" href="default.asp">home</a></li>
                <li class="link-list"><a class="nav-list"  href="news.asp">about</a></li>
                <li class="link-list"><a class="nav-list" href="contact.asp">projects</a></li>
                <li class="link-list"><a class="nav-list"  href="about.asp">portfolio</a></li>
                <li class="link-list"><a class="nav-list" href="about.asp">commissions</a></li>
                <li class="link-list"><a class="nav-list" href="about.asp">patreon</a></li>
              </ul>
              </div>

          <div class="news-box">
          <h1>current project</h1>
          Arena Circus ch 4 | Inserting voices into The Pretenders Guild
          <h1>Current Events</h1>
          <ul>
          <li>The Pretenders Guild voice update is coming 7/15/19!
          </li>
          <li>Check the 1 year anniversary <a href = "https://www.patreon.com/posts/1-year-special-28267096">special offer</a> here!</li>
          </ul>
          </div>
           <div class="twitter-min">
          <a class="twitter-timeline" data-width="300" data-height="450" data-theme="light" data-link-color="#343584" href="https://twitter.com/CapMinyan?ref_src=twsrc%5Etfw">Tweets by CapMinyan</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
          </div>
      </div>




Aucun commentaire:

Enregistrer un commentaire