Personal Portfolio - Div Background Issues

#1

I’m a new-born babe when it comes to this stuff, so don’t be afraid to tell me I’m dumb xD

My issue is that whenever I attempt to wrap a button and a header in one line on the page, it wont stay on that line. And when I found out how to do so, it messed up my background color. I keep trying to figure out the cause but I can’t wrap my brain around it.

Here’s the pen:

#2

Nevermind, just fixed it. I was dumb and didn’t wrap #menuButtons inside #menuHeader. Sorry for the clog ;p

#3

You could also do something like:
HTML

<link href="https://fonts.googleapis.com/css?family=Julius+Sans+One|Khand|Lobster+Two" rel="stylesheet">
<div id="menu">
  <div class="row" id="menuHeader">
    <div class="col-xs-6">
      <h1 id="title">Portfolio - <span id="titleDrew">Drew</span></h1>
    </div>
    <div class="col-xs-6 text-right">
      <div id="menuButtons">
        <button class="btn btn-default" id="buttonAbout">About</button>
        <button class="btn btn-default" id="buttonWorks">Works</button>
        <button class="btn btn-default" id="buttonContact">Contact</button>
      </div>
    </div>
  </div>
</div>
<div id="content">
</div>

CSS

#menuHeader {
  background-color: #f08400;
  -webkit-box-shadow: 0px 15px 0px 0px rgba(186,99,0,1);
  -moz-box-shadow: 0px 15px 0px 0px rgba(186,99,0,1);
  box-shadow: 0px 15px 0px 0px rgba(186,99,0,1);
  margin-top: 0em;
  height: 5em;
  background-size: auto 100%;
/*   display: inline-block; */
}

#title {
  color: white;
  text-align: left-center;
  text-shadow: 1px 2px 1px black;
  font-family: khand, arial;
  display: inline;
  background-color: #f08400;
}

#titleDrew {
  color: silver;
}
1 Like