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